方法 1：使用 document.execCommand('copy') 在用户触发的事件中

这种方法适用于用户触发的事件（如点击按钮），因为这是 execCommand('copy') 的唯一允许场景。

<template><button @click="copyToClipboard">复制到剪贴板</button>
</template><script>
export default {methods: {copyToClipboard() {const text = '要复制的内容'; // 你想复制的文本const el = document.createElement('textarea');el.value = text;el.setAttribute('readonly', '');el.style.position = 'absolute';el.style.left = '-9999px';document.body.appendChild(el);el.select();document.execCommand('copy');document.body.removeChild(el);alert('已复制到剪贴板'); // 提示复制成功}}
}
</script>

方法 2：使用 Clipboard API（推荐方式）

从 Chrome 66 开始，Clipboard API 提供了一个更现代、更安全和更标准的方法来复制内容到剪贴板。这种方法可以在任何上下文中使用，而不需要用户交互。

<template><button @click="copyToClipboard">复制到剪贴板</button>
</template><script>
export default {methods: {async copyToClipboard() {const text = '要复制的内容'; // 你想复制的文本try {await navigator.clipboard.writeText(text);alert('已复制到剪贴板'); // 提示复制成功} catch (err) {console.error('复制失败', err);}}}
}
</script>

方法 3：使用第三方库（如 clipboard.js）

如果想要一个更简单、兼容性更好的解决方案，可以考虑使用第三方库如 clipboard.js。这个库封装了浏览器的各种剪贴板操作，并提供了一个简单易用的 API。

首先，你需要安装 clipboard.js：

npm install clipboard --save

然后，在你的 Vue 组件中使用它：

<template><button class="btn" data-clipboard-text="要复制的内容">复制到剪贴板</button>
</template><script>
import Clipboard from 'clipboard'; // 引入 clipboard.js
export default {mounted() {new Clipboard('.btn'); // 初始化 Clipboard.js，传入选择器字符串或者DOM元素列表等参数。这里使用了类选择器作为示例。}
}
</script>

随手记录一下~