vue2.0—自定义全局指令
构建项目和创建组件就不细说了，不懂的可以去官方文档API学习
VUE官方文档：https://cn.vuejs.org/v2/guide/
- 首先在根目录下创建directive文件，并在文件中创建directive.js文件
directive.png
2.编写directive.js文件，这里就自定义drag和cons指令为例
import Vue from "vue"
const drag = Vue.directive('drag',function(el){
el.onclick = function(){
alert('我是自定义drag指令')
}
})
const cons = Vue.directive('cons',function(el){
el.onclick = function(){
alert('我是自定义cons指令')
}
})
export default {
drag,
cons
}
3.在main.js中引入
import Vue from 'vue'
import App from './App'
import router from './router'
import directive from './directive/directive.js';
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
4.在组件中直接使用
<p><el-button type="primary" v-drag>触发事件</el-button></p>
<p><el-button type="primary" v-cons>触发事件</el-button></p>
