vue权限用自定义指令

对于Vue的权限控制，可以使用自定义指令来实现。自定义指令可以在DOM元素上添加一些特定的行为或样式，同时也可以用于控制元素的显示与隐藏。

首先，你可以在Vue中创建一个自定义指令，用于控制权限的显示与隐藏。以下是一个简单的例子：

// 创建一个名为v-permission的自定义指令
Vue.directive('permission', {
  inserted: function (el, binding, vnode) {
    // 获取传入的权限值
    const permission = binding.value;

    // 判断当前用户是否拥有该权限
    const hasPermission = checkPermission(permission); // 这里需要自己实现权限校验逻辑

    // 根据权限值设置DOM元素的显示与隐藏
    if (!hasPermission) {
      el.parentNode && el.parentNode.removeChild(el);
    }
  }
});

然后，你可以在模板中使用该自定义指令来控制元素的显示与隐藏，例如：

<div>
  <button v-permission="'edit'">编辑</button>
  <button v-permission="'delete'">删除</button>
</div>

在上面的例子中，v-permission指令绑定了一个字符串类型的权限值。在inserted钩子函数中，会根据该权限值进行权限校验，并根据校验结果决定是否移除对应的DOM元素。

需要注意的是，上述例子中的checkPermission函数需要根据你的具体业务逻辑来自行实现，用于判断当前用户是否拥有指定的权限。

希望这个例子能帮助到你实现Vue的权限控制。