Vue3 实现文本复制到剪贴板
Vue3 实现文本复制到剪贴板
·
方法一:【被取代】
<span class="look-value" id="copyText">被复制的文本</span>
<input id="input" value="这是幕后黑手" style="opacity:0;position:absolute" />
<el-button type="primary" size="small" @click="copyText">复制</el-button>
copyText() {
const text = document.getElementById('copyText')!.innerText; // 复制文本
const input = document.getElementById('input')! as any; // 承载复制内容
input.value = text; // 修改文本框的内容
input.select(); // 选中文本
document.execCommand('copy'); // 执行浏览器复制命令
},
方法二:【被取代】
<input ref="inputCopy" value="这是幕后黑手" style="opacity:0;position:absolute" />
<el-button type="primary" size="small" @click="copyText">复制</el-button>
copyText() {
const text = '被复制的文本'; // 复制文本
const input = proxy.$refs.inputCopy
input.value = text; // 修改文本框的内容
input.select(); // 选中文本
document.execCommand('copy'); // 执行浏览器复制命令
},
注意:input 元素,不能使用 disable 属性,也不能设置 v-if 和 hidden 隐藏。只能通过 opacity 和 position 来控制。
方法三:
Clipboard API - Web API 接口参考 | MDN
剪贴板 Clipboard API 提供了响应剪贴板命令(剪切、复制和粘贴)与异步读写系统剪贴板的能力。
从权限 Permissions API 获取权限之后,才能访问剪贴板内容;如果用户没有授予权限,则不允许读取或更改剪贴板内容。
该 API 被设计用来取代使用 document.execCommand() 的剪贴板访问方式。
更多推荐
已为社区贡献7条内容
所有评论(0)