您的位置:首页 > 科技 > IT业 > vue3自定义全局指令和局部指令

vue3自定义全局指令和局部指令

2024/9/30 2:13:07 来源:https://blog.csdn.net/weixin_45128657/article/details/140204382  浏览:    关键词:vue3自定义全局指令和局部指令

1.全局指令


el:指令绑定到的DOM元素,可以用于直接操作当前元素,默认传入钩子的就是el参数,例如我们开始实现的focus指令,就是直接操作的元素DOM
binding:这是一个对象,包含以下属性:
value:在元素上使用指令时,传递给指令的值。例如:

<div v-reserve:fo.bb="hello">456789</div>

传递给reserve指令的值就是hello,我们可以拿到值并做相关处理
oldValue:之前的值,一般用于beforeUpate和updated钩子函数中,例如:beforeUpdate(el, {oldValue: ‘’})
arg:传递给指令的参数,非必需,例如

,那么传递给指令的参数就是foo
modifiers:一个由修饰符构成的对象,例如

app.directive('reserve', {mounted(el, binding) {console.log(el,binding);}
})

在这里插入图片描述


2.局部指令


<el-input v-model="hello" ref="inputRef2" v-focus:inputRef='2'></el-input>const vFocus = {mounted: (el:any,binding:any) => {console.log("%c 🅿️: binding ", "font-size:16px;background-color:#ee4f91;color:white;",el,binding)}
}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com