关于vue模块化之Vue.directive 全局指令
index.vue
<input id="keywords" v-show="bState" type="text" placeholder="请输入" v-c-color="color"> <button @click="Btnclick" v-c-font="cfont">按钮</button>
main.js
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import store from './store' import cdire from './utils/directive/index' console.log('cdire', cdire) Vue.config.productionTip = false Vue.prototype.eventBus = new Vue() /* eslint-disable no-new */ const directive = { 'c-color': cdire.cdirective, 'c-font': cdire.cfont, } Object.keys(directive).forEach(key => { Vue.directive(key, directive[key]) console.log(key) }) new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' })
utils/directive/index
export default { cdirective(el, data, vnode) { el.style['color'] = data.value; }, cfont(el, data, vnode) { el.style.fontSize = data.value; console.log(el); console.log(data); console.log(vnode); } }
先来 export default,main里面的cdire打印的值
![](https://img2018.cnblogs.com/blog/893672/201912/893672-20191213150503129-539152839.png)