Vue自定義指令獲取不到參數(shù)的原因及解決
自定義指令獲取不到參數(shù)的原因
最近在學習前端的權(quán)限管理，需要根據(jù)用戶的權(quán)限對按鈕進行顯示和隱藏，用到了vue中的自定義指令。
首先，在permission.js中定義如下函數(shù)
// 檢查是否有權(quán)限點
export function hasPermissionPoint(point) {
? let points = store.getters.roles.points
? if (points) {
? ? return points.some(it => it.toLowerCase() === point.toLowerCase())
? } else {
? ? return false
? }
}用于比對用戶是否擁有按鈕所需要的權(quán)限。
在main.js中引入這個函數(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);
? ? ? }
? }
})用于定義自定義指令。
然后，就可以在頁面中使用這個指令了
<a v-perm="'import'" ? ? class="el-button el-button--primary el-button--mini" ? ? title="導入">導入</a ? ? ? ? ? ? ? ? ? >
需要注意的是，這里的v-perm值需要在雙引號里面再加個單引號，表示字符串。我一開始就是因為沒有加單引號，導致binding.value一直獲取不到值，百度了很久才發(fā)現(xiàn)這個問題，特此說明。
Vue自定義指令總結(jié)及案例
自定義指令：自定義一些指令對普通 DOM 元素進行底層操作（可注冊全局指令、局部指令）。
使用：如果想注冊局部指令，組件中也接受一個 directives 的選項
案例一：設(shè)置dom字體顏色
一、簡單入門
局部注冊：
<template>
<div>
<div class="study-directive" v-color='fontColor'>自定義指令總結(jié):可以是變量
<!-- <div class="study-directive" v-color='"blue"'>自定義指令總結(jié)：可以是字符串 -->
<br />
<div v-colors='fontColors'>注冊多個自定義指令</div>
<button @click="changeColor">改變顏色</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
fontColor: "red",
fontColors: "green"
};
},
// 注冊一個局部指令 v-color
directives: {
color: {
//被綁定元素插入父節(jié)點時調(diào)用（執(zhí)行一次）
inserted: function(el, bind) {
el.style.color = bind.value;
},
//組件值更新時
update: function(el, bind) {
//當我們觸發(fā) changeColor 修改顏色值時，然而視圖并沒有更新，因為指令也存在生命周期 ，
//所以如果需要視圖更新，使用更新階段
el.style.color = bind.value;
}
},
//存在多個指令時：
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>
全局注冊：
//mian.js中
Vue.directive('color', {
inserted: function (el, bind) {
el.style.color = bind.value
}
})全局注冊多個自定義指令：
①：創(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ù)：
一個指令定義對象可以提供如下幾個鉤子函數(shù) (均為可選)：
bind：只調(diào)用一次，指令第一次綁定到元素時調(diào)用。在這里可以進行默認值設(shè)置。inserted：被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)。update：所在組件的 VNode 更新時調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細的鉤子函數(shù)參數(shù)見下)。componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。unbind：只調(diào)用一次，指令與元素解綁時調(diào)用。
2）鉤子函數(shù)參數(shù)：
el：指令所綁定的元素，可以用來直接操作 DOM。binding：一個對象，包含以下 property：
name：指令名，不包括 v- 前綴。
value：指令的綁定值。
oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。
arg：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 "foo"。
modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
vnode：Vue 編譯生成的虛擬節(jié)點。移步 VNode API 來了解更多詳情。oldVnode：上一個虛擬節(jié)點，僅在 update 和 componentUpdated 鉤子中可用。
二、劃水了
1）動態(tài)指令參數(shù)：指令的參數(shù)可以是動態(tài)的
假如我們需要動態(tài)設(shè)置元素定位的位置：
<p v-color:[direction]="200">content</p>
data() {
return {
direction: "left",
fontColor: "red"
};
},
directives: {
color: {
//被綁定元素插入父節(jié)點時調(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）對象字面量
如果指令需要多個值，可以傳入一個 JavaScript 對象字面量。記住，指令函數(shù)能夠接受所有合法的 JavaScript 表達式。
<div v-color="{ color: 'white', text: 'hello!' }"></div>directives: {
color: {
inserted: function(el, bind) {
console.log(bind)
}
}
},
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了Vue實現(xiàn)多圖添加顯示和刪除，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
本篇文章主要介紹了詳解vue slot插槽的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
實際開發(fā)過程中,我們經(jīng)常遇見需要上傳文件圖片功能,可以封裝一個全局組件來調(diào)用,這篇文章給大家介紹vue使用input封裝上傳文件圖片全局組件,感興趣的朋友跟隨小編一起看看吧2023-11-11
本篇文章主要介紹了vue中的數(shù)據(jù)綁定原理的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vue3+vite使用jsx和tsx詳情，文章通過安裝@vitejs/plugin-vue-jsx展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-05-05
這篇文章主要介紹了mpvue項目中使用第三方UI組件庫的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了VUE axios上傳圖片到七牛的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
elementUI select組件value值注意事項詳解
這篇文章主要介紹了elementUI select組件value值注意事項詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要介紹了Element Breadcrumb 面包屑的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
element-ui中this.$confirm提示文字中部分有顏色自定義方法
this.$confirm是一個Vue.js中的彈窗組件,其樣式可以通過CSS進行自定義,下面這篇文章主要給大家介紹了關(guān)于element-ui中this.$confirm提示文字中部分有顏色的自定義方法,需要的朋友可以參考下2024-02-02