方法1:execCommand
copyLink(){//复制链接--execCommand
let input = document.createElement('input'); //创建一个input标签
input.value = this.shareForm.url; //复制的内容,没有先获取标签
document.body.appendChild(input);//将input添加的document中
input.select();//选择input框中的所有文本
document.execCommand("Copy");//复制input中的内容到剪切版
input.style.display = 'none';//隐藏input
document.body.removeChild(input);//移除input
if (document.execCommand('Copy')) {
this.$Message.success('链接已复制到剪贴板: ' + this.shareForm.url)
}else{
this.$Message.error('复制失败,请手动复制!' )
}
},
方法2:
Clipboard API 提供了更现代化和可靠的方式来处理剪贴板操作,特别是在一些较新的浏览器中推荐使用。下面是实现该方法的示例:
<template>
<div>
<input type="text" v-model="link" readonly>
<button @click="copyLink">复制链接</button>
</div>
</template>
<script>
export default {
data() {
return {
link: 'https://example.com' // 替换为你要复制的链接
};
},
methods: {
copyLink() {
const input = document.querySelector('input');
// 使用Clipboard API异步复制到剪贴板
navigator.clipboard.writeText(input.value)
.then(() => {
// 提示用户复制成功
alert('链接已复制到剪贴板: ' + this.link);
})
.catch(err => {
console.error('复制失败:', err);
});
}
}
};
</script>
解释:
HTML模板:包含一个用于显示链接的输入框和一个按钮,点击按钮将触发复制操作。
Vue组件:定义了一个 link 数据属性来存储链接,以及一个 copyLink 方法来处理复制逻辑。
方法一 使用了 document.execCommand(‘copy’) 来复制文本到剪贴板,适用于大多数浏览器,但是在某些较新的浏览器中已经被废弃,不推荐长期使用。
方法二 使用了 navigator.clipboard.writeText() 来异步地将文本复制到剪贴板,这是一种更现代和可靠的方式,但需要浏览器支持 Clipboard API,且需要在 HTTPS 网站下才能使用。
根据你的需求和浏览器兼容性考虑,选择适合的复制方法即可。