vue如何将文字复制到剪贴板
作者：诸葛博仌
这篇文章主要介绍了vue如何将文字复制到剪贴板的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue将文字复制到剪贴板
1、在需要复制的文本元素上添加一个点击事件
例如：
@click=“copyText”
2、在 Vue 实例的 methods 中
添加一个名为 copyText 的方法，用于实现复制功能。
3、在 copyText 方法中
使用 document.execCommand(‘copy’) 命令将文本复制到剪贴板。
示例代码：
<template>
<div>
<button @click="copyText">复制文本</button>
<p ref="textToCopy" @click="copyText">这是需要复制的文本</p>
</div>
</template>
<script>
export default {
methods: {
copyText() {
//获取需要复制的文本内容。
const text = this.$refs.textToCopy.innerText;
// 创建一个临时的 textarea 元素。
const el = document.createElement('textarea');
// 将需要复制的文本内容赋值给 textarea 元素。
el.value = text;
//将 textarea 元素添加到页面中。
document.body.appendChild(el);
//选中 textarea 元素中的文本。
el.select();
// 执行复制命令，将选中的文本复制到剪贴板
document.execCommand('copy');
//从页面中移除 textarea 元素。
document.body.removeChild(el);
//弹出提示框，告知用户文本已复制成功。
alert('文本已复制');
},
},
};
</script>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。