vue 查看按钮权限指令

1.在 utils下创建js文件，并加入以下内容

import Vue from 'vue' //引入vue

// 按钮判断
function JudgeBtn (el, value, btns) {
  let isHas = false
  btns.forEach(item => {
    if (value === item) isHas = true
  })
  if (isHas) {
    el.style.display = 'inline-block'
  } else {
    el.style.display = 'none'
  }
}

export default function (btnData) {
  // 按钮权限数组
  let btns = []
  btnData.forEach(item => {
    if (item.vcactiontype !== 'PAGE.PERMISSION.TYPE.MU') {
      btns.push(item.vcactioncode)
    }
  })
  // 自定义指令，按钮权限控制
  Vue.directive('btn', {
    // 被绑定元素插入父节点时调用
    inserted (el, binding) {
      // 按钮判断
      JudgeBtn(el, binding.value, btns)
    },
    // 被绑定元素所在的模板更新时调用
    update (el, binding) {
      // 按钮判断
      JudgeBtn(el, binding.value, btns)
    }
  })
}

2.permission.js中获取菜单和按钮数据时，调用

 // 按钮权限控制 btnsAuth(response.data.data)；

3.页面按钮权限控制

 <el-button type="primary" v-btn="按钮code" @click="onSubmit"  style="margin-bottom: 5px; " size="small">
              <i class="el-icon-search"></i>查询
 </el-button>