Vue自定義指令獲取不到參數(shù)的原因及解決
自定義指令獲取不到參數(shù)的原因
最近在學(xué)習(xí)前端的權(quán)限管理，需要根據(jù)用戶的權(quán)限對(duì)按鈕進(jìn)行顯示和隱藏，用到了vue中的自定義指令。
首先，在permission.js中定義如下函數(shù)
// 檢查是否有權(quán)限點(diǎn)
export function hasPermissionPoint(point) {
? let points = store.getters.roles.points
? if (points) {
? ? return points.some(it => it.toLowerCase() === point.toLowerCase())
? } else {
? ? return false
? }
}用于比對(duì)用戶是否擁有按鈕所需要的權(quán)限。
在main.js中引入這個(gè)函數(shù)
import {hasPermissionPoint} from './utils/permission'并在main.js中添加如下代碼
Vue.directive('perm',{
? inserted(el,binding){
? ? ? console.log(binding)
? ? ? if (!hasPermissionPoint(binding.value)) {
? ? ? ? ? el.parentNode.removeChild(el);
? ? ? }
? }
})用于定義自定義指令。
然后，就可以在頁面中使用這個(gè)指令了
<a v-perm="'import'" ? ? class="el-button el-button--primary el-button--mini" ? ? title="導(dǎo)入">導(dǎo)入</a ? ? ? ? ? ? ? ? ? >
需要注意的是，這里的v-perm值需要在雙引號(hào)里面再加個(gè)單引號(hào)，表示字符串。我一開始就是因?yàn)闆]有加單引號(hào)，導(dǎo)致binding.value一直獲取不到值，百度了很久才發(fā)現(xiàn)這個(gè)問題，特此說明。
Vue自定義指令總結(jié)及案例
自定義指令：自定義一些指令對(duì)普通 DOM 元素進(jìn)行底層操作（可注冊(cè)全局指令、局部指令）。
使用：如果想注冊(cè)局部指令，組件中也接受一個(gè) directives 的選項(xiàng)
案例一：設(shè)置dom字體顏色
一、簡(jiǎn)單入門
局部注冊(cè)：
<template>
<div>
<div class="study-directive" v-color='fontColor'>自定義指令總結(jié):可以是變量
<!-- <div class="study-directive" v-color='"blue"'>自定義指令總結(jié)：可以是字符串 -->
<br />
<div v-colors='fontColors'>注冊(cè)多個(gè)自定義指令</div>
<button @click="changeColor">改變顏色</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
fontColor: "red",
fontColors: "green"
};
},
// 注冊(cè)一個(gè)局部指令 v-color
directives: {
color: {
//被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（執(zhí)行一次）
inserted: function(el, bind) {
el.style.color = bind.value;
},
//組件值更新時(shí)
update: function(el, bind) {
//當(dāng)我們觸發(fā) changeColor 修改顏色值時(shí)，然而視圖并沒有更新，因?yàn)橹噶钜泊嬖谏芷?，
//所以如果需要視圖更新，使用更新階段
el.style.color = bind.value;
}
},
//存在多個(gè)指令時(shí)：
colors: {
inserted: function(el, bind) {
el.style.color = bind.value;
},
update: function(el, bind) {
el.style.color = bind.value;
}
}
},
methods: {
changeColor() {
this.fontColor = "green";
}
}
};
</script>
<style scoped>
.study-directive {
margin: 200px 200px 10px;
background: gray;
padding: 40px;
width: 500px;
font-size: 18px;
}
</style>
全局注冊(cè)：
//mian.js中
Vue.directive('color', {
inserted: function (el, bind) {
el.style.color = bind.value
}
})全局注冊(cè)多個(gè)自定義指令：
①：創(chuàng)建directive.js文件，然后編寫全局的自定義組件；
export default (Vue) => {
Vue.directive('color', {
inserted: function (el, bind) {
el.style.color = bind.value
},
update: function (el, bind) {
el.style.color = bind.value;
}
})
Vue.directive('colors', {
inserted: function (el, bind) {
el.style.color = bind.value
}
})
}②：在main.js文件中引入directive.js文件,然后使用Vue.use（directive）調(diào)用；
import directive from "@/utils/directives.js"; Vue.use(directive)
③：在需要使用的地方直接使用
<div v-color='"red"'> 哈哈哈哈哈哈哈哈哈</div>
1）鉤子函數(shù)：
一個(gè)指令定義對(duì)象可以提供如下幾個(gè)鉤子函數(shù) (均為可選)：
bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行默認(rèn)值設(shè)置。inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中)。update：所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見下)。componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。
2）鉤子函數(shù)參數(shù)：
el：指令所綁定的元素，可以用來直接操作 DOM。binding：一個(gè)對(duì)象，包含以下 property：
name：指令名，不包括 v- 前綴。
value：指令的綁定值。
oldValue：指令綁定的前一個(gè)值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
expression：字符串形式的指令表達(dá)式。例如 v-my-directive="1 + 1" 中，表達(dá)式為 "1 + 1"。
arg：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 "foo"。
modifiers：一個(gè)包含修飾符的對(duì)象。例如：v-my-directive.foo.bar 中，修飾符對(duì)象為 { foo: true, bar: true }。
vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)。移步 VNode API 來了解更多詳情。oldVnode：上一個(gè)虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。
二、劃水了
1）動(dòng)態(tài)指令參數(shù)：指令的參數(shù)可以是動(dòng)態(tài)的
假如我們需要?jiǎng)討B(tài)設(shè)置元素定位的位置：
<p v-color:[direction]="200">content</p>
data() {
return {
direction: "left",
fontColor: "red"
};
},
directives: {
color: {
//被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（執(zhí)行一次）
inserted: function(el, bind) {
console.log(bind);
el.style.color = bind.value;
el.style.position = "abosult";
var s = bind.arg == "left" ? "left" : "top";
el.style[s] = bind.value + "px";
}
}
},2）對(duì)象字面量
如果指令需要多個(gè)值，可以傳入一個(gè) JavaScript 對(duì)象字面量。記住，指令函數(shù)能夠接受所有合法的 JavaScript 表達(dá)式。
<div v-color="{ color: 'white', text: 'hello!' }"></div>directives: {
color: {
inserted: function(el, bind) {
console.log(bind)
}
}
},
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
相信大部分兄弟都體驗(yàn)過Vite了,都知道它很快,在學(xué)習(xí)的時(shí)候,官網(wǎng)上的各種配置也是看的眼花繚亂,不知道哪些是必要掌握的,下面這篇文章主要給大家介紹了關(guān)于Vite常見配置選項(xiàng)的相關(guān)資料,需要的朋友可以參考下2024-09-09
vue使用echarts實(shí)現(xiàn)中國(guó)地圖和點(diǎn)擊省份進(jìn)行查看功能
這篇文章主要介紹了vue使用echarts實(shí)現(xiàn)中國(guó)地圖和點(diǎn)擊省份進(jìn)行查看功能,本文通過實(shí)例代碼給大家詳細(xì)講解，對(duì)vue echarts 中國(guó)地圖相關(guān)知識(shí)感興趣的朋友一起看看吧2022-12-12
Vue.js中一個(gè)很重要的知識(shí)點(diǎn)是組件通信,不管是業(yè)務(wù)類的開發(fā)還是組件庫開發(fā),都有各自的通訊方法,下面這篇文章主要給大家介紹了關(guān)于Vue3常用的通訊方式的相關(guān)資料,需要的朋友可以參考下2022-05-05
vue.js滾動(dòng)條插件vue-scroll的基本用法
在移動(dòng)端或PC,頁面的部分內(nèi)容常常需要我們讓其在頁面滾動(dòng),這篇文章主要給大家介紹了關(guān)于vue.js滾動(dòng)條插件vue-scroll的基本用法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
一文詳解Vue3組件通信輕松玩轉(zhuǎn)復(fù)雜數(shù)據(jù)流
在大型Vue項(xiàng)目中,組件通信如同神經(jīng)網(wǎng)絡(luò)般貫穿整個(gè)應(yīng)用,這篇文章將為大家詳細(xì)介紹一下Vue3中的組件通信方式,有需要的小伙伴可以了解下2025-02-02
隨著前端工程化的應(yīng)用越來越廣，插件和包的管理也逐漸衍生出很多的管理器，常見的幾種包管理器如：npm、cnpm、yarn、pnpm，那你知道這些管理器之間有哪些區(qū)別嗎？我們一起來逐個(gè)認(rèn)識(shí)下它們2023-04-04
這篇文章主要介紹了vue-for循環(huán)嵌套操作,結(jié)合實(shí)例形式分析了vue.js使用for循環(huán)嵌套讀取數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
文章介紹了使用vue-pdf@4.3.0時(shí)遇到的上傳特殊PDF文件無法正常預(yù)覽的問題,通過查看控制臺(tái)報(bào)錯(cuò)信息,發(fā)現(xiàn)是因?yàn)槿鄙僮煮w導(dǎo)致的,解決方法是修改pdfjs-dist庫的代碼,注釋掉隱藏電子簽章的代碼,為了在生產(chǎn)環(huán)境中應(yīng)用這個(gè)修改,使用了patch-package插件,感興趣的朋友一起看看吧2024-11-11
本文深入探討了Vue3中新特性shallowReactive的使用和原理,shallowReactive是創(chuàng)建淺響應(yīng)式對(duì)象的API,只對(duì)對(duì)象的第一層屬性進(jìn)行響應(yīng)式轉(zhuǎn)換,不對(duì)嵌套對(duì)象處理,有助于性能優(yōu)化和狀態(tài)管理,同時(shí)也指出了shallowReactive在使用中的注意事項(xiàng)2024-10-10
v-bind和v-model是Vue.js中的兩個(gè)常用指令,它們?cè)诠δ芎陀猛旧嫌幸恍﹨^(qū)別,接下來小編就給大家具有講講vue中v-bind和v-model區(qū)別,感興趣的同學(xué)跟著小編一起來看看吧2023-08-08