vue 自定义v-permission 指令 实现根据用户权限控制按钮等元素的显示隐藏

参考地址：https://blog.csdn.net/weixin_43094965/article/details/122727682

 

function checkArray(key) {
  let arr = ['1', '2', '3', '4']
  let index = arr.indexOf(key)
  if (index > -1) {
    return true // 有权限
  } else {
    return false // 无权限
  }
}

const permission = {
  inserted: function (el, binding) {
    let permission = binding.value // 获取到 v-permission的值
    if (permission) {
      let hasPermission = checkArray(permission)
      if (!hasPermission) {
        // 没有权限 移除Dom元素
        el.parentNode && el.parentNode.removeChild(el)
      }
    }
  },
}

export default permission

使用：

<button v-permission="'1'">权限按钮1</button>