vue自定义指令
时间:2024-03-29 16:40:30 来源:网络cs 作者:往北 栏目:卖家故事 阅读:
目录
一、什么是自定义指令
二、全局自定义指令directive
三、局部自定义指令directives
四、自定义指令的调用
五、自定义指令的钩子函数
六、自定义指令传参
七、常见自定义指令
一、什么是自定义指令
vue官方提供很多指令,如:v-model,v-show,v-if,v-if等,他们都以v-开头。当这些指令不能满足我们实际开发需求时,我们还可以自定义指令。自定义指令主要分为全局自定义指令和局部自定义指令。
二、全局自定义指令directive
在main.js中写全局自定义指令
// 自动获取焦点Vue.directive('focus', { inserted: function (el) { el.focus() }})
三、局部自定义指令directives
可以在任意组件中定义自定义指令,directives是一个对象,他的每一个属性就只一个自定义指令,这里定义了一个focus指令。
directives: { focus: { inserted: function (el) { el.focus() } }}
四、自定义指令的调用
和普通指令的使用方式一样v-自定义指令名称
如v-focus
五、自定义指令的钩子函数
有以下五个钩子函数:
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted
:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
update
:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
componentUpdated
:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind
:只调用一次,指令与元素解绑时调用。
每个钩子函数有以下参数:
el:指令所绑定的元素,可以用来直接操作 DOM。binding:一个对象,包含以下 property: name:指令名,不包括 v- 前缀。value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"。arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"。modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。vnode:Vue 编译生成的虚拟节点。oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。注意:bind和insert都只调用一次;bind在insert前执行,也就是bind在dom树绘制前调用,insert在dom树绘制后调用;涉及dom操作的,我们一般都用insert,如自动获取焦点指令,只能用insert函数。
六、自定义指令传参
<div v-test:[data1]>这是测试页。。。。</div>
可以用binding.arg去接收":"后的参加参数,这里传递了data1这个变量,data1必须用[]包裹,否则就是‘data1’这个字符串,[]中只能传递一个变量,多个变量可以用对象或数组组装。binding.value去接收"="后的参数,这里是个函数所以用bingding.value()去调用。
<div v-test:[data1]='func'>这是测试页。。。。</div> test: {inserted(el, binding, vnode) {// 获取参数console.log('test',binding.arg);// 执行传递的函数binding.value({success: true,data:{}});},}
七、常见自定义指令
1、拖拽
dragV: {bind(drag, binding, vNode) {drag.style.position = 'absolute';drag.style.zIndex = '9999';//当鼠标按下时drag.onmousedown = e => {//做到浏览器兼容e = e || window.event let diffX = e.clientX - drag.offsetLeftlet diffY = e.clientY - drag.offsetTop//当拉着box移动时document.onmousemove = e => {// 浏览器兼容e = e || window.event;let left = e.clientX - diffX;let top = e.clientY - diffY;drag.style.left = left + 'px';drag.style.top = top + 'px';}// 当鼠标抬起时document.onmouseup = function() {this.onmousemove = nullthis.onmouseup = null}}}},
2、防抖
<div v-debounce:[time]="debounceFunc">这是测试页。。。。</div> debounce:{inserted(el, binding) {let timer;let delay = binding.arg || 500;el.addEventListener('click', () => {if (timer) {clearTimeout(timer)}timer = setTimeout(() => {binding.value()}, delay)})},}
本文链接:https://www.kjpai.cn/gushi/2024-03-29/150407.html,文章来源:网络cs,作者:往北,版权归作者所有,如需转载请注明来源和作者,否则将追究法律责任!
下一篇:返回列表