Vue-自定义指令（v-permission）

最新推荐文章于 2025-06-18 11:08:04 发布

心之所向_gp

最新推荐文章于 2025-06-18 11:08:04 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_55182699/article/details/130233062

文章介绍了如何在Vue项目中创建并使用自定义指令v-permission来处理按钮权限功能。通过在directives文件夹下创建permission.js，定义插入元素时的权限检查逻辑，然后在index.js中批量注册包括v-permission在内的多个指令，并在main.js中全局应用。这种方式使得权限控制代码可复用且易于维护。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue除了默认设置的核心指令( v-model ，v-show，v-if ), Vue 也允许注册自定义指令。自定义指令就是一种有效的补充和扩展，不仅仅可用于定义任何dom操作，并且是可以复用的。目前项目刚好是有在做按钮权限方面的功能，我实现的方式就是用自定义指令（v-permission）来实现的。

在src下面创建一个directives的文件夹

在文件夹里创建一个permision文件内容如下：

export default {
    inserted(el, bindling) {
        //bindling.value为指令的绑定值
        let perVal = bindling.value;
        if (bindling.value) {
            //hasPermision this.checkValidate是我们项目的自定义的检验权限码的方法
            // 校验的方法可以自由发挥
            let hasPermision = this.checkValidate(perVal)
            //没有权限就先隐藏此元素吧
            if (!hasPermision) {
                el.style.display = "none"
            }
        }
    }
}

然后再将permission.js引入到同文件下的index.js：

import permission from "./permission"
import toFixed from "./toFixed"
//批量注册指令
const directives = {
    permission,
    toFixed
}
//注册的一般写法，循环遍历directives，通过vue.directive注册
export default {
    install(Vue){
        Object.keys(directives).forEach(key=>{
            Vue.directive(key,directives[key])
        })
    }
}

然后在main.js里面全局引入index.js（当然我们也可以选择按需引入，可以根据不同的场景来）