Vue自定义v-has指令,做按钮权限判断的步骤

下面是详细讲解“Vue自定义v-has指令,做按钮权限判断的步骤”的完整攻略。

什么是Vue自定义v-has指令？

在Vue中，通过自定义指令来扩展Vue的功能。我们通过自定义指令 v-has 来控制按钮级别的权限，当某个按钮没有权限时，我们可以通过这个指令让这个按钮隐藏或者不可点击。

自定义指令v-has实现步骤

1. 注册自定义指令

在Vue中，可以通过 Vue.directive() 方法来注册自定义指令，代码如下：

Vue.directive('has', {
        inserted: function (el,binding) {
            if(!checkPermission(binding.value)){
                el.parentNode.removeChild(el);
            }
        }
    })

判断按钮是否有权限的函数 checkPermission 需要自己实现，在这里就不详细介绍了。

1. 在按钮上使用指令

我们可以在需要控制权限的按钮上使用 v-has 指令，指令的值为权限值，如 v-has="view"。当用户没有 view 这个权限时，这个按钮会被隐藏掉。

<button v-has="'view'">查看</button>

示例说明

下面我们通过两个示例来详细说明如何使用自定义指令 v-has 来控制按钮级别的权限。

示例一：隐藏按钮

当用户没有 edit 权限时，隐藏编辑按钮。

<template>
  <button v-has="'edit'">编辑</button>
</template>

<script>
export default {
  ...
  directives: {
    has: {
      inserted: function(el, binding) {
        if (!checkPermission(binding.value)) {
          el.style.display = 'none'
        }
      }
    }
  }
}
</script>

我们将 el.style.display 设为了 none，这样按钮就被隐藏掉了。

示例二：禁用按钮

当用户没有 delete 权限时，禁用删除按钮。

<template>
  <button v-has="'delete'" :disabled="!isDeleteEnabled">删除</button>
</template>

<script>
export default {
  ...
  data() {
    return {
      isDeleteEnabled: checkPermission('delete')
    }
  },
  directives: {
    has: {
      inserted: function(el, binding) {
        if (!checkPermission(binding.value)) {
          el.disabled = true
        }
      }
    }
  }
}
</script>

我们通过 :disabled 绑定了一个变量 isDeleteEnabled，当用户没有 delete 权限时，这个变量为 false，这样按钮就被禁用了。

以上就是使用自定义指令 v-has 实现按钮级别的权限控制的完整攻略及示例说明。