自定義指令 directive
// 注冊一個全局自定義指令
Vue.directive('boxStyle', {
// 當被綁定的元素插入到 DOM 中時……
inserted: function (el) {
// 改變該元素的背景顏色
el.style.background = 'skyblue'
}
})
- 可作用于任何DOM元素上
// 注冊局部自定義指令
directives: {
focus: {
// 指令的定義
inserted: function (el) {
el.style.background = 'yellow'
}
}
},
用法都是相同的
<!-- 用法：v-xxx 定義的名字 -->
<ul v-focus>
<li v-for="item of arr" :key="item">{{item}}</li>
</ul>
- 自定義指令可設置參數
Vue.directive('pin', {
bind: function (el, binding) {
//el: 要操作的節(jié)點元素
// binding：傳遞的參數
el.style.position = 'fixed'
el.style.top = binding.value + 'px'
console.log(binding, 'node')
}
})
// 用指令時 v-pin="200" 200就是 binding.value
<a-button v-pin="200" @click="handlecilck">檢查是否為變位詞</a-button>
-
控制臺打印的binding
image.png
動態(tài)參數
Vue.directive('pin', {
bind: function (el, binding) {
el.style.position = 'fixed'
const s = (binding.arg == 'left' ? 'left' : 'top')
el.style[s] = binding.value + 'px'
console.log(binding, 'binding')
}
})
// 用法
<a-button v-pin:[dir]="200" @click="handlecilck">檢查是否為變位詞</a-button>
data () {
return {
dir: 'top'
}
}
-
控制臺打印的binding
image.png
