vue2.0—自定义全局指令

vue2.0—自定义全局指令

构建项目和创建组件就不细说了，不懂的可以去官方文档API学习

VUE官方文档：https://cn.vuejs.org/v2/guide/

1. 首先在根目录下创建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>