【分享一个vue指令】复制指令v-copy

概述

HTML模板部分 <template>

这部分定义了组件的HTML结构。它包含四个div元素，其中两个使用了v-copy指令。这个指令是自定义的，用于实现点击复制文本的功能。

• 第一个div元素使用了v-copy指令，但没有提供任何值，所以它会复制该元素的文本内容。
• 第二个div元素没有使用任何指令。
• 第三个div元素使用了v-copy指令，并提供了一个字符串值'此处复制'，这意味着当用户点击这个元素时，会复制这个字符串而不是元素的文本内容。
• 第四个div元素同样没有使用任何指令。

JavaScript逻辑部分 <script setup>

这部分是空的，因为所有的逻辑都在自定义指令中定义了。

样式部分 <style lang="less" scoped>

这部分也是空的，但是指定了使用LESS作为样式语言，并且样式是作用域化的，意味着它们只会应用到当前组件。

自定义指令 v-copy

自定义指令v-copy定义在JavaScript代码中，它包含三个生命周期钩子：mounted、updated和beforeUnmount。

• mounted(el, binding)：当元素被挂载到DOM上时，这个钩子会被调用。在这里，它创建了一个复制函数copyFn，这个函数会在用户点击元素时被触发。复制函数会根据是否提供了