Vue之自定义指令使用及解读(v-permission)
更新时间：2026年03月17日 14:23:08 作者：心之所向_gp
文章介绍了如何在Vue中创建和使用自定义指令（v-permission）来实现按钮权限控制,通过在`src/directives`目录下创建`permission.js`文件并定义指令,然后在`index.js`中引入并全局注册该指令,最后在`main.js`中引入`index.js`,即可在项目中使用自定义指令
Vue自定义指令(v-permission)
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
（当然我们也可以选择按需引入，可以根据不同的场景来）
最后使用
自定义指令的话就和Vue自带的指令是一样
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue项目中自动导入svg并愉快的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-11-11
这篇文章主要介绍了完美解决通过IP地址访问VUE项目的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章介绍了通过setup+ref+reactive实现vue3响应式功能，文中通过示例代码介绍的非常详细。对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-11-11
这篇文章主要介绍了vuex实现及简略解析(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要介绍了如何删除vue项目下的node_modules文件夹，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了Vue.js实现的购物车功能,结合实例形式分析了vue.js购物车的原理、数值计算及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2019-01-01
基于vue 添加axios组件,解决post传参数为null的问题
下面小编就为大家分享一篇基于vue 添加axios组件,解决post传参数为null的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
Wavesurfer.js是一款基于HTML5 canvas和Web Audio的声纹可视化插件，功能十分强大，在Vue框架中嵌入使用该插件，今天重点给大家介绍下vue使用wavesurfer.js解决音频可视化播放问题，感兴趣的朋友一起看看吧2022-04-04
文章介绍了如何配置Vue.js项目的端口,以避免与Spring Boot后台项目的默认端口冲突,通过修改Vue的配置文件,将端口更改为其他值,如8081,可以成功启动Vue项目2026-01-01
这篇文章主要介绍了在WebStorm中配置Vu3项目的详细步骤,还解决了ElementPlus与Sass版本兼容性问题,并提供了详细的配置和运行步骤,需要的朋友可以参考下2025-02-02
最新评论