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

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前文学习了 Vue的自定义指令之基础篇, 先要打好基础. 及自定义指令-UI权限验证/ 点击按钮等元素显示水波纹效果. 今天来学习 Vue小知识-常用指令(三) 自定义指令绑定动态数据

Vue 动态指令

指令的参数可以是动态的。例如，在 v-mydirective:[argument]="value" 中，argument 参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。

这里简单学习下根据指令绑定的动态数据, 来控制按钮的 显示, 更多功能可自行添加, 比方说: 按钮样式动态显示, 根据后台接口返回

首先看下 静态样式

通过 静态样式就知道这里面的简单逻辑了, 把静态数据换成请求的后端接口返回的数据进行, 控制显示结果

<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>

动态效果

即将数据换成请求的即可

// src/directives/permission.js

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