1、在需要复制的文本元素上添加一个点击事件,例如 @click=“copyText”
2、在 Vue 实例的 methods 中添加一个名为 copyText 的方法,用于实现复制功能。
3、在 copyText 方法中,使用 document.execCommand(‘copy’) 命令将文本复制到剪贴板。
4、示例代码
<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;
const el = document.createElement('textarea');
el.value = text;
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
alert('文本已复制');
},
},
};
</script>