脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue自定义指令(v-permission)

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自带的指令是一样

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论