Vue之自定義指令使用及解讀(v-permission)
更新時間：2026年03月17日 14:23:08 作者：心之所向_gp
文章介紹了如何在Vue中創(chuàng)建和使用自定義指令（v-permission）來實現(xiàn)按鈕權(quán)限控制,通過在`src/directives`目錄下創(chuàng)建`permission.js`文件并定義指令,然后在`index.js`中引入并全局注冊該指令,最后在`main.js`中引入`index.js`,即可在項目中使用自定義指令
Vue自定義指令(v-permission)
vue除了默認設(shè)置的核心指令( v-model ，v-show，v-if ), Vue 也允許注冊自定義指令。
自定義指令就是一種有效的補充和擴展，不僅僅可用于定義任何dom操作，并且是可以復(fù)用的。
目前項目剛好是有在做按鈕權(quán)限方面的功能，我實現(xiàn)的方式就是用自定義指令（v-permission）來實現(xiàn)的。
在src下面創(chuàng)建一個directives的文件夾
在文件夾里創(chuàng)建一個permision文件內(nèi)容
如下：
export default {
inserted(el, bindling) {
//bindling.value為指令的綁定值
let perVal = bindling.value;
if (bindling.value) {
//hasPermision this.checkValidate是我們項目的自定義的檢驗權(quán)限碼的方法
// 校驗的方法可以自由發(fā)揮
let hasPermision = this.checkValidate(perVal)
//沒有權(quán)限就先隱藏此元素吧
if (!hasPermision) {
el.style.display = "none"
}
}
}
}
再將permission.js引入到同文件下的index.js
import permission from "./permission"
import toFixed from "./toFixed"
//批量注冊指令
const directives = {
permission,
toFixed
}
//注冊的一般寫法，循環(huán)遍歷directives，通過vue.directive注冊
export default {
install(Vue){
Object.keys(directives).forEach(key=>{
Vue.directive(key,directives[key])
})
}
}
在main.js里面全局引入index.js
（當然我們也可以選擇按需引入，可以根據(jù)不同的場景來）
最后使用
自定義指令的話就和Vue自帶的指令是一樣
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue項目中自動導(dǎo)入svg并愉快的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
這篇文章主要介紹了完美解決通過IP地址訪問VUE項目的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
setup+ref+reactive實現(xiàn)vue3響應(yīng)式功能
這篇文章介紹了通過setup+ref+reactive實現(xiàn)vue3響應(yīng)式功能，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2021-11-11
這篇文章主要介紹了vuex實現(xiàn)及簡略解析(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了如何刪除vue項目下的node_modules文件夾，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue.js實現(xiàn)的購物車功能,結(jié)合實例形式分析了vue.js購物車的原理、數(shù)值計算及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-01-01
基于vue 添加axios組件,解決post傳參數(shù)為null的問題
下面小編就為大家分享一篇基于vue 添加axios組件,解決post傳參數(shù)為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