我正在参加「掘金·启航计划」
指令基础
关于指令
在我们日常使用的指令内，我们有v-bind，v-show，v-for等等，他们都是内置指令，相信你已经体验到了这些指令的作用，而官方也允许我们封装自定义指令，本文将从封装指令的基础展开，带大家实战两个自定义指令的案例，掌握自定义指令。
指令的钩子
Vue2.x与Vue3.x的指令钩子是不一样的，所以在大家封装的时候要注意Vue的版本，我们可以通过指令的钩子在合适的时机做一些操作，比如我们可以在表单元素插入DOM之后给到一个聚焦的操作，优化了用户输入表单的体验感，关于钩子的具体细节大家可以看看官方文档
我比较常用的还是inserted或者beforeMount，这个时候元素还没有插入到DOM中。
指令的参数
对于指令绑定的元素肯定需要传入一些参数供我们操作，比如提供元素，我们可以进行dom操作，以及我们使用指令传递来的值，在本文开启正式封装之前一定要看看这些参数的作用，Vue3.x的指令参数，Vue3.x相对于Vue2.x多出了组件实例对象和指令的定义对象，能更好地扩展我们的封装，比较常用的是
el：我们可以通过这个参数来操作指令所绑定的DOM元素，这也是自定义指令的主要目的所在，我们可以做聚焦，显示，隐藏等等操作binding：binding参数包括了指令在DOM元素上所绑定的值，以及参数，比如v-has:fn，fn就是指令所选的参数，我们可以根据这些参数来进行更加扩展的操作
下面我们开启正题，先以自定义权限指令为例子，来教大家封装一个自定义指令。（本文以Vue2.x举例）
自定义一个权限指令
我们下面要自定义一个权限指令，那么这个权限的定义是，根据我们所登录账户所拥有的权限，来将他所有权限不可以使用的操作元素移除，防止跨越权限操作，有思路了吧，下面一起看看具体如何实现吧
const hasPermi = Vue.directive('hasPermi', {
inserted: function (el, binding) {
let permissions = JSON.parse(localStorage.getItem('hasPermission'))
let isPermi = false;
permissions.some((permiItem) => {
let permiStr = permiItem.name;
binding.value.forEach((item) => {
if (permiStr === item) {
isPermi = true
}
});
});
if (!isPermi && el.parentNode) {
el.parentNode.removeChild(el)
}
}
})
- 使用
Vue.directive方法注册指令，第一个参数为注册的指令名，在使用指令的时候v-+注册名，第二个参数为指令定义对象，包括在各个指令钩子中操作 - 这里做的权限操作需要在被绑定元素加载前根据权限判断是否隐藏，所以我们选择在
inserted钩子中进行判断 - 一般我们可以在
localStorage或者Vuex存储指令集，这里使用localStorage存储，拿到permissions，这个集合为当前所登录账号的权限集合 - 声明一个权限判别
isPermi变量 - 遍历当前权限集合与指令绑定的元素所需要的权限集合，进行比较
- 最后根据
isPermi进行元素的移除
在工程中自定义指令
下面以自定义聚焦指令为例子，在工程中如何封装自定义指令
// focus.js
export default {
inserted: function (el) {
// 聚焦元素
el.focus()
}
}
// index.js
import focus from './focus.js'
const install = function(Vue){
Vue.directive('focus', focus)
}
// main.js
Vue.use(install)
- 我们可以将每个指令中内含的钩子函数操作暴露出去，如
focus.js - 再在当前指令目录下
index.js中声明指令注册函数install - 再在
main.js中注册全局
