java控制按钮权限-button️自定义指令-directive封装button组件的思路

1.背景

近期在开发云服务项目，对于button级别的权限控制有一定的要求，但是一处处改的话比较吃力不讨好，费时费力，就想着做一个封装。

基础环境：vue + element

2.尝试

1⃣️封装button组件

第一想法就是封装一个button组件，然后在需要的地方引用，但是这个想法还是有个bug，不管button组件封装的如何，但是总需要把之前的button全部替换为新的button组件，这个虽然省一点时间java控制按钮权限，但是很不满意。当然，代码还是要贴出来，留个纪念吧。

2⃣️vue自定义指令--directive

第二时间想到了这个黑科技，定一个专属于项目的指令java控制按钮权限，好像是个不错的选择。

对于directive不熟悉的可以看一下官方文档，还是很详细的。传送门

思路：根据判断权限的方法返回的结果，为当前button添加class（is-disabled），当然，因为使用的是element，所以button添加的是is-disabled这个class，不过这个还是要根据各自的实际情况修改，不要照本全搬。

废话不说，上代码：

import Vue from "vue";
// currentActionIsDisabled为权限判断方法
import {currentActionIsDisabled} from "@/helpers/policy.js";
// 注册一个全局自定义指令 `v-yh-btn-muddy`
Vue.directive("yh-btn-muddy", {
	// 当button无权限时，为button添加class（is-disabled）
	inserted: async function(el, binding) {
		const {action, product} = binding.value;
		const disabled = await currentActionIsDisabled(product, action);
		if (disabled) {
            el.disabled = true;
			el.classList.add("is-disabled");
		}
	},
});

就是那么简单，事件的两个参数（el, binding）分别为当前节点和自定义的参数。

现在只需要挂载在全局即可：

在main.js里引入即可

import "./directives/yh-access-muddy";

到现在为止基本完成了，你可以像使用v-modal一样使用v-yh-btn-muddy了。

现在要做的是为每个button增加v-yh-btn-muddy指令，虽然也会费点精力，但相对于刚开始的实现方式，这种方式明显精简了很多。如果你有其他更好的方式，欢迎分享。