8个非常实用的Vue自定义指令

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了8个非常实用的Vue自定义指令相关的知识,希望对你有一定的参考价值。

参考技术A 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。
Vue自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式,通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。
批量注册指令,新建 directives/index.js 文件

在 main.js 引入并调用

指令定义函数提供了几个钩子函数(可选):

bind: 只调用一次,指令第一次绑定到元素时调用,可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次, 指令与元素解绑时调用。

下面分享几个实用的 Vue 自定义指令

复制粘贴指令 v-copy
长按指令 v-longpress
输入框防抖指令 v-debounce
禁止表情及特殊字符 v-emoji
图片懒加载 v-LazyLoad
权限校验指令 v-premission
实现页面水印 v-waterMarker
拖拽指令 v-draggable

v-copy
需求:实现一键复制文本内容,用于鼠标右键粘贴。
思路:

动态创建 textarea 标签,并设置 readOnly 属性及移出可视区域
将要复制的值赋给 textarea 标签的 value 属性,并插入到 body
选中值 textarea 并复制
将 body 中插入的 textarea 移除
在第一次调用时绑定事件,在解绑时移除事件

使用:给 Dom 加上 v-copy 及复制的文本即可

剩余的请看原文

以上是关于8个非常实用的Vue自定义指令的主要内容,如果未能解决你的问题,请参考以下文章

分享8个非常实用的Vue自定义指令

超实用:Vue 自定义指令合集

Vue3自定义指令v-copy实现复制文字

Vue3自定义指令v-copy实现复制文字

Vue3自定义指令v-copy实现复制文字

Vue:八种实用的自定义指令