vue 自定义指令

btnPermissions.js

import Vue from 'vue'
/**权限指令**/
　　const has = Vue.directive('has', {
  　　// 当被绑定的元素插入到 DOM 中时……
  　　inserted: function (el, binding, vnode) {
    　　let btnPermissions = el.getAttribute('data-type');
    　　// 获取指令按钮权限
    　　if (!Vue.prototype.$_has(btnPermissions)) {
      　　el.parentNode.removeChild(el);
    　　}
  　　}
　　});


// 权限检查方法
Vue.prototype.$_has = function (value) {
 let isExist = false;
 let btnPermissionsStr =  ['1','2','adds'];;
 if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
  return false;
 }
 if (btnPermissionsStr.indexOf(value)>-1) isExist = true ;return isExist;
};

export {has}

在 main.js  引入  

import has from './common/btnPermissions.js'

 

页面结构中直接使用 自定义指令

<Button type="success" data-type='add' v-has  >添加</Button>