vue directive全局自定义指令实现按钮级别权限控制的操作方法

实现按钮级别权限控制是一个非常常见的需求。通过vue directive全局自定义指令可以方便地实现此功能。以下是具体的操作方法：

1. 创建Vue全局指令

我们使用Vue.directive注册一个全局指令。具体实现方法如下：

Vue.directive('permission', {
  // 在成功绑定到元素时被调用
  bind: function (el, binding, vnode) {
    const action = binding.arg // 按钮权限名称
    const userPermission = store.state.currentUser.permission // 用户权限列表

    // 判断用户是否有该权限
    if (!userPermission.includes(action)) {
      // 移除按钮元素
      el.parentNode.removeChild(el)
    }
  }
})

上述指令将会在绑定的时候自动调用并且判断用户是否具备该按钮权限，如果没有权限就会移除按钮元素。

2. 使用指令

接下来，我们就可以使用这个自定义指令了。我们可以使用v-permission指令来标记我们想要使用它的按钮。具体方法如下：

<!-- 带有属性v-permission="'create'"，表示该按钮需要create权限才能显示 -->
<button v-permission="'create'">Create</button>

<!-- 带有属性v-permission="'delete'"，表示该按钮需要delete权限才能显示 -->
<button v-permission="'delete'">Delete</button>

<!-- 带有属性v-permission="'update'"，表示该按钮需要update权限才能显示 -->
<button v-permission="'update'">Update</button>

3. 总结

通过Vue指令，我们可以轻松地实现按钮级别的权限控制。实际使用时，我们需要根据自己的实际情况来创建自定义指令。

示例：

<!-- 带有属性v-permission="'create'"，表示该按钮需要create权限才能显示 -->
<button v-permission="'create'">Create</button>

<!-- 带有属性v-permission="'delete'"，表示该按钮需要delete权限才能显示 -->
<button v-permission="'delete'">Delete</button>

<!-- 带有属性v-permission="'update'"，表示该按钮需要update权限才能显示 -->
<button v-permission="'update'">Update</button>

Vue.directive('permission', {
  // 在成功绑定到元素时被调用
  bind: function (el, binding, vnode) {
    const action = binding.arg // 按钮权限名称
    const userPermission = ['create', 'update'] // 模拟用户权限列表

    // 判断用户是否有该权限
    if (!userPermission.includes(action)) {
      // 移除按钮元素
      el.parentNode.removeChild(el)
    }
  }
})

在上述示例中，我们假设用户只有create和update两种权限。我们使用v-permission属性来定义按钮权限。在指令中，我们模拟了一个用户权限列表，然后检查该按钮是否在用户权限列表中。如果不在就移除该元素。这样就实现了按钮级别的权限控制。