陶醉的松鼠自定义指令传参
在main.js中定义一个指令。
javascript
Vue.directive('zoom', {
bind: function (el, binding, vnode) {
console.log(binding.arg) // {a:1,b:2}
},
update: function (el) {
},
unbind: function (el) {
}
})
使用自定义指令，在任意一个html元素中，使用指令。
html
# :{a:1,b:2} 为自定义参数
<div v-zoom:{a:1,b:2}="{width: 800, height: 1000}"></div>
- 方式一：v-zoom:
- 对于{a:1,b:2}，在binding属性中，以字符串的形式传递，故可以写[1,2]、true等数据格式，但是最后拿到的都是字符串类型。
- 方式二：v-zoom="{width: 800, height: 1000}"
- 等号后面的{width: 800, height: 1000}，可以在binding的value属性中获取的数据的类型没有变化，
- 可以直接使用。width后面的数字,可以用当前组件的参数替换。
- 方式三：v-zoom.a.b
除了
el之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。
防抖
html
<div v-debounce="addTag"></div>
vue
directives:{
debounce :{
inserted: function (el, binding,vnode,oldVnode) {
let timer
// 为当前绑定元素绑定点击事件
el.addEventListener('click', () => {
//清除上一次点击添加的定时器
if (timer) {
clearTimeout(timer)
}
let callNow = !timer
timer = setTimeout(() => {
timer=null
}, 1000)
//若点击不快则执行绑定的方法
if(callNow){
binding.value()
}
})
},
}
}