先看效果图：

说明是什么？

按照惯例，请先给出官方解释：

指令是带有v字头的特殊功能。指令属性的值应该是一个单独的JavaScript表达式(v-for是一个例外，这将在后面讨论)。指令的职责是当表达式的值改变时对DOM做出响应。

大家照例(假装)不明白，然后我举个栗子解释。好吧，我还是不知道该说什么。本文结束(携程F4)，下一篇。

为了避免上述情况，就不解释了。其实很多内置指令都是官方提供的，比如v-if、v-for、v-bind等等。每条指令都有自己特定的功能。

自定义指令

顾名思义，就是自定义指令，可以实现我们想要的功能。让我们实现一键复制功能。

生存期

首先，简单地看一下指令的语法。每条指令都有自己的生命周期。看到生命周期，肯定会想到钩子函数。是的，该指令还提供了挂钩功能：

Bind:当指令第一次绑定到一个元素时调用，这个钩子只会被调用一次。在这里，您可以进行一次性初始化设置。插入：当绑定元素插入到父节点时调用(只保证父节点存在，但不一定插入到文档中)。Update:当组件的VNode更新时会调用它，但它可能发生在其子VNode更新之前。指令的值可能已更改，也可能未更改。ComponentUpdated:在指令所在组件的VNode及其子VNode全部更新后调用。Unbind:仅调用一次，当指令与元素解除绑定时调用。让我们简单地看一下上面钩子函数的参数：

El:指令绑定的元素，可以用来直接操作DOM。绑定：具有以下属性的对象：名称：指令名称，不包括v前缀。Value:指令的绑定值，例如，在v-my-directive='1 1 '中，绑定值为2。OldValue:指令绑定的前一个值，只在update和componentUpdated钩子中可用。无论值是否改变都可用。表达式：字符串形式的指令表达式。例如，在v-my-direction=' 1 1 '中，表达式为' 11 '。Arg:传递给指令的参数，可选。例如，在v-my-directive:foo中，参数是“foo”。修改器：包含修改器的对象。例如，在v-my-direct.foo.bar中，修饰符对象为{foo: true，bar: true}。虚拟节点：由VUE编译生成的虚拟节点。有关更多详细信息，请访问VNode API。OldVnode:上一个虚拟节点，只在update和componentUpdated钩子中可用。看起来蛮多的，但是在其他方面，常用的也就那么几个。好了，开始表演吧：

首先，创建一个js文件(v-copy.js)。定义一个对象。(指令实际上是一个对象)

从“ant-design-vue”导入{ Message }；Const vCopy={//取任意名字喜欢的/* bind hook函数，第一次绑定时调用。您可以通过dom object value:初始化传递给指令的值，这是我们想要复制的值*/bind (el，{value}) {el。$ value=value//使用一个全局属性来存储传入的值，因为这个值也将用于其他具有el.handler=()={if(！埃尔。$value) {//当值为空时，给出提示。我这里的提示是ant-design-vue提示。您可以随意发送Message.warning(“无复制内容”)。返回；}//动态创建textarea标记const text area=document . create element(' text area ')；//将textarea设置为readonly，防止在iOS下自动调用键盘，并将textarea移出可视区域textarea.readOnly=' readonlytextarea . style . position=' absolute '；text area . style . left='-9999 px '；//将要复制的值赋给value属性textarea.value=el。textarea标签的$值；//将textarea插入到body document . body . appendchild(text area)中；//选择值并复制text area . select()；textarea.setSelectionRange(0，text area . value . length)；const result=document . exec command(' Copy ')；如果(结果){Message.success('复制成功')；} document . body . remove child(text area)；};//Binding click事件就是所谓的一键复制el.addeventlistener ('click '，El . handler)；}，//触发器组件已更新(el，{value}) {el。$ value=更新传入值时的值；}，//当指令与元素解除绑定时，移除事件绑定unbind(El){ El . removeeventlistener(' click '，El . handler)；},};导出默认vCopy至此，实现了一键复制的功能。最后，我们来谈谈如何向全局注册自定义指令：创建一个新的instructions)文件来注册所有的全局指令。

从“”导入副本。/v-copy '；//自定义指令const指令={copy，}；//这种写入可以注册指令导出默认的{install (vue) {object。按键(指令)。foreach ((key)={vue。指令(键，指令[键])；});},};最后，main.js中介绍了这一点：

从“Vue”导入Vue；从“”导入指令。/指令'；Vue.use(指令)；最后，我们来谈谈如何使用它。

template button v-Copy=' Copy text ' Copy/button/templatesciportdefault { data(){ return { Copy text : ' content to Copy '，}；},};/脚本摘要

以上是边肖介绍的实现一键复制功能的Vue自定义指令。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！