vue自定义指令实现按钮级权限

1、创建指令文件bthPermission.js，编写自定义指令：

import Vue from 'vue';
import api from "api";
/**权限指令**/
const has = Vue.directive('has', {
  bind: async function (el, binding, vnode) {
    // 权限编码
    let permitCode = binding.value;
    // 异步请求，判断是否存在权限
    let res = await api.request('getBusinessRelation', { permitCode });
    let hasPermit = res.data.hasPermit;
    // 若不存在权限则移除权限按钮
    if (!hasPermit) {
      el.parentNode.removeChild(el);
    }
  }
})

export {
  has
}

2、在main.js中引入文件

import has from "./utils/bthPermission.js";

3、在页面中使用

<el-button slot="append" v-has="'all_marketing'" @click="skipEdit(1,'')" size="mini">+ 新建任务</el-button>

 

参考自定义指令官方文档： https://cn.vuejs.org/v2/guide/custom-directive.html