这是我参与12月更文挑战的第28天，活动详情查看：2021最后一次更文挑战
上文说到 SAAS 系统动态按钮权限，是通过 Vue 自定义指令—— Vue.directive 实现的，自定义指令在 每个页面，是怎么引入的呢？我在开发过程中有没有遇到什么困难呢？让我们来看看今天的文章。
在页面中使用 Vue 自定义指令
上回，我们提到怎么注册自定义指令，在页面中，自定义指令是怎么使用的呢？
我的自定义指令命名为 btnlimit，在使用指令时，和平时我们使用 Vue 自带指令相同，都是靠 v-X 引入，此时，我们的自定义指令是这样使用的：
v-btnlimit='当前页面id'
其中，组件注册时，钩子函数中会有几个参数，我只用到了前两个参数：
el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含value，例如：v-btnlimit='当前页面id'中，binding.value为“当前页面id”。
我们可以利用自定义组的钩子函数的 el 参数，去操作当前所绑定的元素，甚至可以直接操作其 parent 和其children ；因为我们有权限的页面，是列表页，列表页每条消息都是有按钮组的，依托此功能，我们可以把自定义指令，绑定在按钮组的外层，去遍历其子元素，以减少绑定的次数，在 js 中的说法，大概就是事件委托。
我们可以利用自定义组的钩子函数的 binding.value 参数，获取当前元素所属页面，以此从服务端数据中取到当前页面的按钮权限，与当前页面的全部按钮权限进行比对，对无权限的按钮进行隐藏，以达到动态按钮权限的目的。
在开发过程中遇到的困难
在开发过程中，难免会遇到一些困难，此次遇到主要困难如下：
之前没有考虑过做动态按钮权限，导致按钮组件的写法各异，有用 span 定义按钮的，有用 button定义的，还有使用 div 定义，而且涉及到的页面多达四五十个，挨个去添加自定义组件和对应页面 id 值，显然是一件工作量巨大且容易出错的事情。
我是怎么解决这个问题的呢，请听下回分解。
