定義全局插件的步驟
1.定義全局插件 pluginsUtil.js
Vue.js 的插件應(yīng)當(dāng)有一個(gè)公開(kāi)方法 install 。這個(gè)方法的第一個(gè)參數(shù)是 Vue 構(gòu)造器，第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對(duì)象：
export default {
install (Vue, options) {
// 具體4種方式捞奕，寫(xiě)在此處
}
}
2.main.js里引入并使用
import pluginsUtil from './pluginsUtil'
Vue.use(pluginsUtil)
3.組件內(nèi)調(diào)用
vue全局插件的4種方式
1.Vue.mixin 方式
注冊(cè)全局混合對(duì)象
Vue.mixin({
data () {
return {
someValue1: 'some value1：mixin的data里的值'
}
}
})
2.Vue.prototype 方式
定義 Vue 原型上的屬性
Vue.prototype.someValue2 = 'someValue2：Vue.prototype上的值'
Vue.prototype.getDate = function () {
let dateNew = new Date()
return dateNew
}
3.Vue.filter 方式
定義全局過(guò)濾器
Vue.filter('vcntFormat', function (cnt) {
return cnt >= 100000 ? Math.floor(cnt / 10000) + '萬(wàn)' : cnt
})
4.Vue.directive 方式
定義全局自定義指令
Vue.directive('myfocus', {
// 當(dāng)綁定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
- 詳細(xì)代碼見(jiàn)github倉(cāng)庫(kù)：https://github.com/cag2050/vue_product_demo/blob/master/src/pluginsUtil/index.js
