Vue2中的自定义指令的用法整理

1. 自定义指令的定义

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

2. 如何自定义指令

通过插件来为 Vue 添加全局资源：指令/过滤器/过渡等
通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成;
插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象;
通过Vue.directive, 或者组件内的directives选项（包含 Vue 实例可用指令的哈希表），注册自定义组件。

2.1 以vue-touch为例

2.2 自定义一个权限指令

2.2.1 权限功能主要代码

export default {

  // 元素插入到DOM中的时候会执行inserted函数（触发一次）; 和js行为相关的操作，需要在inserted方法中去执行，防止js行为不生效
  // el: 表示被绑定了指令的那个元素; 除了 el 之外，其它参数都应该是只读的
  // binding: 是一个对象，它包含以下属性：name/指令名，value/指令的绑定值, expression/字符串形式的指令表达式, arg/传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  // vnode: Vue 编译生成的虚拟节点
  
  inserted(el, binding, vnode) {
    const { value } = binding // 指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
    const roles = store.getters && store.getters.flags // 获取到的用户所有权限
    if (value && value instanceof Array && value.length > 0) {
      const permissionRoles = value

      const hasPermission = roles.some(role => {
        return permissionRoles.includes(role)
      })

      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`need roles! Like v-permission="['admin','editor']"`)
    }
  }
}

2.2.2 指令入口

const install = function(Vue) {
  Vue.directive('permission', permission)
}

if (window.Vue) {
  window['permission'] = permission
  Vue.use(install); // eslint-disable-line
}

permission.install = install
export default permission

2.2.3 指令注册

• 全局指令

Vue.use(permission.install)

• 局部指令

2.2.4 使用举例

<el-button
  v-permission="['statistics:export']"
  type="primary"
  icon="el-icon-download"
>
  导出
</el-button>

参考资料

自定义指令
vue-touch