vue 如何实现粘贴复制功能
目录
1. 安装第三方插件方法（不推荐）
2. 浏览器自带Document.execCommand()复制方法（不推荐）
3. Clipboard.writeText方法（强烈推荐）
4.vue-clipboard3
项目中如果实现粘贴复制功能，目前市面上共有四种方法，均有利有弊，大家可以根据自己项目实际情况依次选择。本节将都会对这四种方法做详细阐述，重点推荐第四种方法。
1. 安装第三方插件方法（不推荐）
这种方法兼容性很好，如果项目只使用了一次，不建议使用。
安装插件
npm install clipboard --save
引入插件
import Clipboard from 'clipboard';
项目中使用
直接在元素上添加 data-clipboard-text
适合要复制的内容是固定字符串。
事实是，你甚至不需要另一个元素来复制其内容。你只需在触发器元素中包含
data-clipboard-text属性即可。在某些情况下，你希望显示一些用户反馈或捕获复制/剪切操作后所选择的内容。
这就是我们触发自定义事件（例如
success和error）的原因，以便你监听并实现自定义逻辑。
<template><spanclass="copy"data-clipboard-text="这是要复制的内容"@click="onCopy"><i class="iconfont iconcopy"></i><span>点击复制</span></span>
</template><script setup>
import Clipboard from 'clipboard'const onCopy = () => {const clipboard = new Clipboard('.copy')clipboard.on('success', e => {console.log('复制成功')clipboard.destroy()})clipboard.on('error', e => {console.log('该浏览器不支持自动复制', e)clipboard.destroy()})
}
</script>
制动态内容（推荐）
适合要复制的内容是变量。
如果你不想修改 HTML，可以使用非常方便的命令式 API。你需要做的就是声明一个函数，执行操作，然后返回一个值。
例如，如果你想动态设置
text，则返回一个字符串。new ClipboardJS('.btn', {text: function(trigger) {return trigger.getAttribute('aria-label');} });
<template><span class="copy" @click="onCopy"><i class="iconfont iconcopy"></i><span>点击复制</span></span>
</template><script setup>
import Clipboard from 'clipboard'const textToCopy = '这是一段动态文本'const onCopy = (e) => {const clipboard = new Clipboard('.copy', {text: () => textToCopy // 👈 指定要复制的文本})clipboard.on('success', e => {console.log('复制成功')clipboard.destroy()})clipboard.on('error', e => {console.log('该浏览器不支持自动复制', e)clipboard.destroy()})
}
</script>
2. 浏览器自带Document.execCommand()复制方法（不推荐）
虽然这个方法不需要安装插件，但是官网申明如下：
const input = document.createElement('input')
input.value = '要复制的文字'
document.body.appendChild(input)
input.select()
document.execCommand('copy')
document.body.removeChild(input)
-
这是早期操作剪贴板的方式。
-
它通过让浏览器「选中」一个文本框内容，然后调用
execCommand('copy')来完成复制。 -
复制操作其实是「模拟用户复制」的行为。
3. Clipboard.writeText方法（强烈推荐）
说明
Clipboard 接口的 writeText() 方法可以写入特定字符串到操作系统的剪切板。会返回一个Promise ，一旦剪贴板的内容被更新，它就会被解析。如果调用者没有写入剪贴板的权限，则拒绝写入剪切板（reject）
写入文本至操作系统剪贴板。返回一个在文本已被完全写入剪贴板后兑现的
await navigator.clipboard.writeText('要复制的文字')
console.log('复制成功')兼容代码
<template><span class="copy" @click="onCopy"><i class="iconfont iconcopy"></i><span>点击复制</span></span>
</template><script setup>const textToCopy = '6666'
const onCopy = async () => {try {// 要复制的内容（可改成动态变量）// 使用现代异步 APIawait navigator.clipboard.writeText(textToCopy)console.log('复制成功')} catch (err) {console.error('复制失败：', err)// 某些环境（比如 HTTP 或非安全上下文）不支持 navigator.clipboard// 这里可做回退方案：fallbackCopy(textToCopy)}
}// 回退方案（仅在旧浏览器中执行）
function fallbackCopy(text) {const input = document.createElement('input')input.value = textdocument.body.appendChild(input)input.select()document.execCommand('copy')document.body.removeChild(input)console.log('已通过旧方式复制')
}
</script>
4.vue-clipboard3
使用 clipboard.js 轻松复制到 Vue 3（composition-api）中的剪贴板📋
安装
npm install --save vue-clipboard3使用
<template><span class="copy" @click="copy"><i class="iconfont iconcopy"></i><span>点击复制</span></span>
</template><script setup>
import useClipboard from 'vue-clipboard3'
const { toClipboard } = useClipboard()const copy = async () => {try {await toClipboard("8888888")console.log('Copied to clipboard')} catch (e) {console.error(e)}}</script>
API
useClipboard(options: Options)interface Options {/** Fixes IE by appending element to body. Defaults to true. */appendToBody: boolean
}返回具有单个键的对象：toClipboard
toClipboard(text: string, container?: HTMLElement)要求您至少传入一个字符串参数。这是要复制到剪贴板的文本。第二个可选参数是一个 HTML 元素，在使用 clipboard.js 时，它将在内部用作容器。