溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這次分享的是關于Vue自定義指令的使用方法，學習完基礎后我們再來實戰完成一個下拉列表，廢話不多說，直接上干貨
基本用法
//全局注冊
Vue.directive('my-directive', {
// 指令選項
})
// 局部注冊
var app = new Vue({
el: '#app'
directives: {
'my-directive': {
// 指令選項
}
})
相信對Vue比較熟悉的人看完都知道，directive的寫法與組件 基本類似，只是方法名由component改為了directive。上例只是注冊了自定義指令v-my-directive，還沒實現具體功能，下面具體介紹 自定義指令的各個選項。
指令定義函數提供了幾個鉤子函數 (可選)：
可根據需求在不同的鉤子函數 內完成邏輯代碼，如下面v-focus,我們希望在元素插入父節點時就調用，那用到的最好的就是inserted了。示例代碼如下
// html部分
<div id="app" v-focus>
// js部分
Vue.directive('focus', {
// 當綁定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
效果如下圖所示
自定義指令 v-focus.png
可以看到，打開這個頁面，input輸入框就自動獲取焦點了，成為可輸入狀態。
每個鉤子函數 都可以有幾個參數可用，比如我們上面用到了el。它們 的含義如下：
下面是結合了以上參數 的一些具體示例，代碼如下
// HTML部分
<div id="app" v-demo:msg.a.b="message">
<div v-text:msg.a.b="message"></div>
</div>
// JS部分
Vue.directive('demo', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + binding.name + '<br>' +
'value: ' + binding.value + '<br>' +
'expression: ' + binding.expression + '<br>' +
'argument: ' + binding.arg + '<br>' +
'modifiers: ' + JSON.stringify(binding.modifiers).modifiers + '<br>' +
'vnode keys: ' + Object.keys(vnode).join(',')
}
})
new Vue({
el: '#app',
data: {
message: 'some text'
}
})
執行后，<div>的內容會使用innerHTML重置，結果為
name: "test"
value: "some text"
expression: "message"
argument: "msg"
modifiers: {"a":true,"b":true}
vnode keys: tag, data, children, text, elm, ns, context, functionalContext, functionalOptions, functionalScopeId, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce, asyncFactory, asyncMeta, isAsyncPlaceholder
在多數使用場景，我們會在bind鉤子里綁定一些事件，比如在document上用addEventListerer綁定，在unbind里有
removeEventListener 解綁，比較典型的示例就是讓這個元素隨著鼠標拖拽。
如果需要更多個值，自定義指令也可以傳入一個JavaScript對象字面量， 只要是合法類型的JavaScript表達式都是可以的。示例代碼如下：
// HTML部分
<div id="app" v-demo:msg.a.b="message">
<div v-test="{msg: 'hello', name: 'Aresn'}"></div>
</div>
//JS部分
Vue.directive('test', {
bind: function (el, binding, vnode) {
console.log(binding.value.msg)
console.log(binding.value.name)
}
})
var app = new Vue({
el: '#app'
})
Vue 2.x很移除大量Vue 1.x自定義指令的配置。在使用自定義指令時，應該充分解業務需求，因為很多時候你需要的可能并不是自定義指令，而是組件。
基礎的東西講完了，我們來根據directive提供的API來寫一個點擊外部區域可以讓其下拉列表消失的菜單
// HTML部分
<div id="app" v-clock>
<div class="main" v-clickoutside="handleClose">
<button @click="show = !show">點擊顯示下拉菜單</button>
<div class="dropdown" v-show="show">
<p>下拉框內容，點擊外面區域可以關閉</p>
</div>
</div>
// JS部分
var app = new Vue({
el: '#app',
data: {
show: false
}，
methods: {
handleClose() {
this.show = false;
}
}
})
Vue.directive('clickoutside', {
bind: function(el, binding, vode) {
function documentHandler (e) {
if (el.contains(e.target)) {
return false
}
if (binding.expression) {
binding.value(e)
}
}
el.__vueClickOutSide__ = documentHandler
document.addEventListener('click', documentHandler)
},
unbind: function(el, binding) {
document.removeEventListener('click', el.__vueClickOutSide__)
delete el.__vueClickOutSide__
}
})
要在document上綁定click事件，所以在bind鉤子內聲明了一個函數documentHandler，并將它作為句柄定在document的click事件上。documentHandler函數做了兩個判斷，第一個是判斷點擊的區域是否是指令所在的元素內部，如果是，就跑出函數，不信下繼續執行
contains方法是用來判斷元素A是否包含了元素 B，包含返回true，不包含返回false
// HTML
<div id="parent">
父元素
<div id="children">子元素</div>
</div>
// JS
var a = doucment.getElemengById('parent')
var b = doucment.getElemengById('children')
console.log(A.contains(B)) // true
console.log(B.contains(A)) // false
第二個判斷是當前 的指令v-clickoutside有沒有寫表達式，在該自定義指令中，表達 式應該是第一個函數 ，在過濾了內部元素后，點擊外面任何區域應該招待用戶表達 式中的函數 ，所以binding.value就用來執行上下文methods中指定的函數的
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
