vue设置标签自定义属性_分享8个非常实用的Vue自定义指令

在 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-draggablev-copy

需求：实现一键复制文本内容，用于鼠标右键粘贴。

思路：

动态创建 textarea标签，并设置 readOnly属性及移出可视区域将要复制的值赋给 textarea标签的value属性，