[JavaScript知识库]vue 通过指令为按钮分配权限

目录

新建utils/permission.js

在main.js 文件中导入

使用举例

在一些后台运营平台中，经常会有按钮权限的问题！

可以通过Vue.directive注册一个全局自定义指令解决问题

这里涉及到的技术点：

1.install 方法

2.vue-directive

通过操作dom，控制dom的显隐。

实现v-if的效果: el.parentNode.removeChild(el)
实现v-show的效果:el.style.display = ‘none’

新建utils/permission.js

//按钮权限是保存在vuex中

import Vue from 'vue'
import store from '../store'

let PermissionPlugin = {};
PermissionPlugin.install = function(Vue, options){
    Vue.directive('hasPermission', {
    // 当被绑定的元素插入到 DOM 中时……
    bind(el, binding) {
      const codeArr = store.state.stateAuthority.permissions; 
      if (codeArr) {
        let flag = false
        
        codeArr.map((item) => {
          if (item === binding.value) { //说明按钮需展示
            flag = true
          }
        })
       
        if (!flag) {
          console.log(el.parentNode,'000');
          if (!el.parentNode) {
            el.style.display = 'none'
          } else {
            el.parentNode.removeChild(el)
          }
        }else{
          el.style.display = 'inline-block'
        }
      }else{ // 如果返回权限为空，则默认不展示所有按钮
        el.style.display = 'none'
      }
    },
    inserted:function(el, binding){
      //被绑定的元素插入父节点的时候调用(父节点存在即可调用，不必存在document中)
    },
    update:function(el, binding){
      //被绑定于元素所在模板更新时调用，而且无论绑定值是否有变化
      //通过比较更新前后的绑定值，忽略不必要的模板更新
      const codeArr = store.state.stateAuthority.permissions; 
      if (codeArr) {
        let flag = false
     
        codeArr.map((item) => {
          if (item === binding.value) {
            flag = true   
          }
        })
      
        if (!flag) {
          console.log(el.parentNode,'000');
          if (!el.parentNode) {
            el.style.display = 'none'
          } else {
            el.parentNode.removeChild(el)
          }
        }else{
          el.style.display = 'inline-block'
        }
        
      }else{ // 如果返回权限为空，则默认不展示所有按钮
        el.style.display = 'none'
      }
    }
  })
}


export default PermissionPlugin;

在main.js 文件中导入

import PermissionPlugin?from './utils/permission'

Vue.use(PermissionPlugin)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

使用举例

<el-button v-hasPermission="'customer_purchase_edit'" type="text" size="small" @click="onHandleEvent(scope.row, 'edit')">修改</el-button>

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖