转载：VUE按钮权限控制获取不到父节点解决方法

 

原创地址 https://blog.csdn.net/weixin_44041659/article/details/85242743

最近做项目，客户要求做用户-角色-按钮权限，我是用自定义指令来实现的，代码如下：

import Vue from 'vue'
/**权限指令**/
Vue.directive('has', {
  bind: function (el, binding) {
    debugger
    if (!Vue.prototype.$_has(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
});
//权限检查方法
Vue.prototype.$_has = function (value) {
  debugger
  let isExist = false;
  let buttonpermsStr = ['admin', 'inpurt'];
  if (buttonpermsStr == undefined || buttonpermsStr == null) {
    return false;
  }
  for (let i = 0; i < buttonpermsStr.length; i++) {
    if (value == buttonpermsStr[i]) {
      isExist = true;
      break;
    }
  }
  return isExist;
};

这里的数据，我是用来测试的，项目的数据不便贴出。刚开始el.parentNode获取不到，总是为null，是因为获取时DOM还没有加载，所以就放在了setTimeout里。

将自定义代码单独放在js文件里，然后在main.js中引用即可

 

import has from './assets/btnPermission.js'

然后直接在按钮上使用; 

<template>
  <div>
    <button class="btns" v-has="'admin1'">新增</button>
  </div>
</template>

 

IMPOERT:上述问题更好的解决方案：

不使用bind钩子，使用inserted，inserted的作用是，被绑定元素插入父节点时调用，父节点存在即可调用。

import Vue from 'vue'
/**权限指令**/
Vue.directive('has', {
  inserted: function (el, binding) {
    debugger
    if (!Vue.prototype.$_has(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
});
//权限检查方法
Vue.prototype.$_has = function (value) {
  debugger
  let isExist = false;
  let buttonpermsStr = ['admin', 'inpurt'];
  if (buttonpermsStr == undefined || buttonpermsStr == null) {
    return false;
  }
  for (let i = 0; i < buttonpermsStr.length; i++) {
    if (value == buttonpermsStr[i]) {
      isExist = true;
      break;
    }
  }
  return isExist;
};