全域性元件設計

打底背景一般樣式(_popbox.scss)如下。由於很多彈出窗都需要這種背景，且有這麼乙個功能是，點選黑色背景，就關閉彈出窗。那麼我們可以設計乙個可以存放彈出內容，且點選打底背景就關閉彈出窗的元件。

// 變數存在於專門記錄全域性變數的檔案中，參考bootstrap的變數檔案

$pop-z-index: 12 !default;
$pop-bg-color: rgba(0,0,0,0.7) !default;
// 彈出窗的背景
.pop-box

...

其中幕簾位於最前方，舞台在中間，背景位於最後方。

這三者對應元件那些部分？

涉及到多個元件共享乙個狀態，且無關父子關係，這個時候考慮用vuex或者redux

以下使用vuex

常量:pop-constant.js

// pop-constant.js

export const pop_confirm_open = 'pop-confirm-open'

import * as types from '@/modules/pop-constant'

const state = 
}const mutations = , state.confirm, confirm)
}}const actions = , confirm) 
}export default

import  from 'vuex'

// 這裡快取模組`pop.js`命名空間
export const popmaps = createnamespacedhelpers('pop')

import  from '@/modules/maps'

// 對映pop.js模組的state和actions到元件上
const popactions = popmaps.mapactions(['setconfirm'])
const popstate = popmaps.mapstate(['confirm'])
export default ,
methods: )
},// 要調出confirm就在那個需要調這個的元件中對映setconfirm且建立這個函式
// 或者使用mixins 全域性新增(所有元件都新增了，注意)或者區域性新增
// 像這種高頻率的彈出窗（toast），可以新增到全域性mixin中
// cb中的this要指定vue例項 在vue元件中可以箭頭函式或者bind this.openconfirm('haha', () => {})
openconfirm (text, cb = null) )
},submit (res)  = this.confirm
cb && cb()
}return this.closeconfirm()}}
}

}

Vue全域性布局元件的設計

設計全域性布局元件，比如側邊欄，導航欄，標籤欄等。在博思考試系統專案中，由於所有頁面都要用到公共的布局元件，所有將他們封裝起來，這裡記錄一下用法。首先在router.js中設定相應的父級的元件。布局元件，layout.vue 這裡需要注意的是子元件的內容需要在父元件中寫才能顯示。這裡還有乙個注意點 ...

全域性元件和區域性元件

根元件 new vue 根元件只有乙個 乙個根元件中包含什麼 狀態 data 是給模板提供資料 方法 methods 是給模板提供方法 生命週期鉤子函式 8個生命週期函式 計算屬性 computed 根據已有的狀態，計算出乙個新的狀態 過濾器 對狀態進行格式化 el 是指定模板 子元件 子元件中包含...

vue獲取全域性元件 解析Vue全域性元件和區域性元件

vue中元件分為兩種 1.全域性元件 2.區域性元件 接下來我們看看兩種元件的區別 一 使用範圍 全域性元件使用範圍 可以在頁面中任何位置使用 區域性元件使用範圍 只能在定義它的el中使用，不能再其他位置使用，否則就無法生效 二 定義元件的方法 全域性元件 可以使用vue.component tag...