自定义指令 做按钮权限vuecli element scss

/*
  自定义指令 用于做按钮权限  
  1. 这里定义指令 showBtn  
  2. main.js 中用Vue.use(showBtn) 引入
      import showBtn from "@/components/directive/index.js";
      Vue.use(showBtn)
  3. 页面中使用
       <el-button v-showBtn="11"> 显示隐藏 1</el-button>

 */
import Vue from 'vue';
const showBtn = Vue.directive('showBtn',{
  bind:function(el,binding,vnode) {
    // console.log(el,binding,vnode)
    const btnName = binding.value;
    const btnAuth = [11,22,33,44]; // 后端定义的数据 项目中建议存入vuex 中
    if(!btnAuth.includes(btnName)){  // 如果btnAuth 中没有btnName 
      if(!el.parentNode){ // 做兼容  
        el.style.display = 'none';
      }else{
        el.parentNode.removeChild(el);
      }
    }
  }
})

export default showBtn