Vue.js自定义指令从基础到实现权限指令

指令基础

关于指令

在我们日常使用的指令内，我们有v-bind，v-show，v-for等等，他们都是内置指令，相信你已经体验到了这些指令的作用，而官方也允许我们封装自定义指令，本文将从封装指令的基础展开，带大家实战两个自定义指令的案例，掌握自定义指令。

指令的钩子

Vue2.x与Vue3.x的指令钩子是不一样的，所以在大家封装的时候要注意Vue的版本，我们可以通过指令的钩子在合适的时机做一些操作，比如我们可以在表单元素插入DOM之后给到一个聚焦的操作，优化了用户输入表单的体验感，关于钩子的具体细节大家可以看看官方文档

• Vue2.x的钩子：Vue2指令钩子
• Vue3.x的钩子：Vue3指令钩子

我比较常用的还是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中注册全局