如何编写Vue3自定义指令实现按钮权限控制代码？

本文共计1278个文字，预计阅读时间需要6分钟。

经过一周的摸索和查阅资料，我终于掌握了VUE3中自定义指令，实现了按钮级别的权限控制。虽然只是简单的对按钮进行隐藏和删除的DOM操作，但直接操作DOM相对容易，且当按钮无权限时直接隐藏，避免了复杂的逻辑判断。

经过1个周的摸索和查阅资料，终于搞定VUE3中自定义指令，实现按钮级别的权限控制。当然，只是简单的对按钮进行隐藏和删除的dom操作比较容易，一直纠结的是当按钮无权限时，不是直接删除当前dom元素（button按钮），这样用户体验不好，让人感觉没有这个功能。为了提高用户体验，当该按钮无权使用时，使用el-tooltip功能进行提醒。以下是个人的做法，是否有弊端和不足，或者各位高手有更优的方案，欢迎指导和赐教！

1、总体效果如下：

2、permissionlist组件中的按钮设置为：增加、修改和删除三个按钮，为了让button按钮disabled时，可以让tooltip继续有效，在button外层加了个span。为了通过自定义指令中方便控制tooltip，vue3好像必须把自定义指令放在tooltip的外层，所以又在tooltip外层加了个span以放在自定义指令v-has。