vue自定义指令记录

auth.js

export function check(authority) {
    let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
    let current = userInfo ? userInfo.buttons: [];
    return current.some(item => authority.includes(item)); //过滤
}

index.js

import { check } from "./auth";
// 开发插件的方式；定义指令；第一个参数是Vue 构造器，第二个参数是可选的选项对象
function install(Vue, options = {}) {

  Vue.directive(options.name || "auth", {
    // 指令定义对象的钩子函数inserted
    inserted(el, binding) {
      if (!check(binding.value)) {
        el.parentNode && el.parentNode.removeChild(el);
      }
    }
  });
}

export default { install };

全局注入

//通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：
import Auth from "@/directives/index";
Vue.use(Auth);

页面使用

 <Button type="info" icon="md-add" class="mini-btn" @click="handleSave" v-auth="['system:user:add']">拉取用户</Button>