1.
注意：developer.mozilla.org/zh-CN/docs/…
document.execCommand已弃用: 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。
const copyText = (val) => {
// 获取需要复制的元素以及元素内的文本内容
const text = val
// 添加一个input元素放置需要的文本内容
const input = document.createElement('input')
input.value = text
document.body.appendChild(input)
// 选中并复制文本到剪切板
input.select()
document.execCommand('copy')
// 移除input元素
document.body.removeChild(input)
return '已成功复制'
}
2. navigator.clipboard 是浏览器提供的一个对象，用于访问系统剪贴板内容。
mdn链接：developer.mozilla.org/zh-CN/docs/…
剪贴板 Clipboard API 提供了响应剪贴板命令（剪切、复制和粘贴）与异步读写系统剪贴板的能力。从权限 Permissions API 获取权限之后，才能访问剪贴板内容；如果用户没有授予权限，则不允许读取或更改剪贴板内容。
限制：
- 必须通过 HTTPS 提供网页服务（本地开发环境 localhost 例外）
- 操作必须由用户手势触发（如点击事件）
- 用户可以随时拒绝剪贴板访问权限
- 部分浏览器目前仅支持部分功能，具体可去官方文档查看
if (navigator.clipboard) {
console.log("Clipboard API 可用");
} else {
console.log("当前环境不支持 Clipboard API");
}
方法
| 方法 | 描述 |
|---|---|
| writeText(text) | 将指定文本写入剪贴板 |
| readText() | 从剪贴板读取纯文本内容 |
| write(data) | 写入富文本或图像等数据(实验性) |
| read() | 读取富文本或图像等数据(实验性) |
copy(value) {
navigator.clipboard.writeText(value).then(() => {
this.$message.success("复制成功");
});
}
read(){
navigator.clipboard.readText()
.then(text => alert("剪贴板内容为：" + text))
.catch(err => console.error("读取失败:", err));
}
