1、定义自定义指令

app.directive('my-directive', {
  mounted(el, binding, vnode) {
    // 指令被绑定
  },
  updated(el, binding, vnode, prevVNode) {
    // 指令的值更新
  },
  unmounted(el, binding, vnode) {
    // 指令被解绑
  }
})

2、绑定自定义指令

使用v-前缀绑定自定义指令，指令加上参数或修饰符，例如：

其中，arg为指令参数，modifier为指令修饰符。

实现按钮级权限的自定义指令应该如下所示：

app.directive('permission', {
  beforeMount(el, binding, vnode) {
    const { value } = binding
    const permissions = ['edit', 'delete']
    if (value && !permissions.includes(value)) {
      el.disabled = true
      el.classList.add('disabled')
      el.title = '无权限'
    }
  }
})

使用v-permission指令来绑定，例如：

编辑

查看

其中，v-permission指令的值为按钮权限，即'edit'或'delete'。对于没有权限的按钮，将被禁用，添加disabled类，并设置title提示“无权限”。