当前位置：首页 > news >正文

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

news 2024/11/22 16:46:28

概述

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，这个函数会在用户点击元素时被触发。复制函数会根据是否提供了binding.value（即v-copy指令的值）来决定复制的内容，如果没有提供，则复制元素的文本内容。然后，它创建一个临时的textarea元素，将内容复制到其中，选中文本，并尝试使用document.execCommand('copy')复制到剪切板。最后，它会移除临时的textarea元素，并根据复制是否成功弹出相应的提示。
updated(el, binding)：当元素的绑定更新时，这个钩子会被调用。在这个例子中，它没有实现任何功能，但是可以根据需要在这里更新指令的行为。
beforeUnmount(el)：在元素被卸载之前，这个钩子会被调用。在这里，它移除了之前绑定的点击事件监听器，以防止内存泄漏。

使用

<template><div><div v-copy>1231231</div><div>445</div><div v-copy="'此处复制'">122727388</div><div>888</div><!-- <div v-resize="resizeWin">129391239</div> --></div>
</template><script setup></script><style lang="less" scoped></style>

代码

/* 点击复制指令 */app.directive('copy', {// 使用 `mounted` 替代 `bind`mounted(el, binding) {// 创建复制函数el.copyFn = () => {console.log('点击的是哪个DOM', el);// 获取自定义内容，如果没有指定，则默认复制元素的文本内容const contentToCopy = binding.value || el.innerText;// 创建一个隐藏的文本区域来复制内容const textarea = document.createElement('textarea');textarea.value = contentToCopy;document.body.appendChild(textarea);textarea.select();// 复制内容到剪切板try {const successful = document.execCommand('copy');const msg = successful ? '复制成功，可以粘贴啦' : '复制失败';alert(msg);} catch (err) {console.error('复制失败', err);alert('当前浏览器不支持一键复制功能，请手动复制粘贴');}document.body.removeChild(textarea);};// 绑定点击事件el.addEventListener('click', el.copyFn);},// 使用 `updated` 替代 `componentUpdated`updated(el, binding) {// 可以根据需要更新指令的行为},// 使用 `beforeUnmount` 替代 `unbind`beforeUnmount(el) {// 移除点击事件el.removeEventListener('click', el.copyFn);}});