Vue 自定义指令控制按钮权限 - 详细教程

在 Vue 中，可以通过自定义指令来实现控制按钮权限。自定义指令是一个函数，需要在 Vue 实例中注册，并在模板中使用。以下是一个实现控制按钮权限的自定义指令的示例：

// 注册指令
Vue.directive('permission', {
  bind: function(el, binding) {
    // 获取用户权限
    let userPermission = getUserPermission();
    // 获取按钮权限
    let buttonPermission = binding.value;
    // 判断用户权限是否包含按钮权限
    if (!userPermission.includes(buttonPermission)) {
      // 隐藏按钮
      el.style.display = 'none';
    }
  }
})

// 在模板中使用指令
<button v-permission=''add''>添加</button>
<button v-permission=''edit''>编辑</button>

在上面的示例中，自定义指令的名称为permission，在模板中使用时需要添加v-前缀。指令的bind函数在指令第一次绑定到元素上时执行。在bind函数中，获取用户权限和按钮权限，如果用户权限不包含按钮权限，则隐藏按钮。binding.value是指令的参数，即按钮权限。在模板中使用指令时，需要将按钮权限作为参数传递给指令，如v-permission=''add''。这样，只有当用户有add权限时，才会显示添加按钮，否则会隐藏。