Vue常用指令 (三)--按钮显示控制-动态指令

<div class="btns">
  <!-- 通过传入的内容 控制显示与否 -->
  <button v-permission="'1'">权限按钮-teamLeader</button>
  <button v-permission="'2'">权限按钮-</button>
  <button v-permission="'3'">权限按钮-test</button>
  <!-- 传入 5, 不包含这一项, 即没有权限 故不显示 -->
  <button v-permission="'5'">权限按钮-学生</button>
</div>
复制代码

function checkArray(key) {
  let perArray = ['1', '2', '3', '4', 'default']
  let index = perArray.indexOf(key)
  if (index > -1) {
    return true // 包含有这一条 即有权限
  } else {
    return false // 否则无权限, 即不显示
  }
}

const permission = {
  inserted: function (el, binding) {
    let permission = binding.value // 通过 参数 binding 获取到 指令 permission 的值
    if (permission) {
      let hasPermission = checkArray(permission)
      if (!hasPermission) {
        // 如果没有权限 就删除掉对应的 Dom 元素
        console.log('el: ', el)
        console.log('el.parentNode: ', el.parentNode)

        el.parentNode && el.parentNode.removeChild(el)
      }
    }
  },
}

export default permission