复制功能在前端开发中有许多常见的使用场景；
在实现这些功能时，需要注意浏览器的兼容性和安全性，确保操作不会因为浏览器限制或安全策略而失败。通常情况下，现代浏览器支持使用 navigator.clipboard.writeText 来进行文本复制操作，但在特定情况下（如在非交互上下文中）可能需要用户显式的允许。
实现方法：
方法一：
navigator.clipboard.writeText(str)
.then(() => {
this.$message.success('复制成功');
})
.catch((error) => {
this.$message.error('复制失败');
});
方法二：
<i id="btn" class="el-icon-document-copy" @click="copyText(JSON.stringify(props.row.rowData, null, 2))"></i>
import Clipboard from 'clipboard';
copyText(str) {
const clipboard = new Clipboard('#btn', { text: () => str });
// 复制成功执行的回调
clipboard.on('success', () => {
this.$message.success('复制成功');
clipboard.destroy();
});
},
方法三:
function copyTextToClipboard(text) {
// 创建一个临时的 textarea 元素
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
// 选择文本并执行复制命令
textarea.select();
document.execCommand('copy');
// 清理临时元素
document.body.removeChild(textarea);
console.log('Text copied to clipboard:', text);
alert('Text copied to clipboard!');
}
// 示例用法：将文本 'Hello, world!' 复制到剪贴板
copyTextToClipboard('Hello, world!');
