方法1:execCommand
copyLink(){//复制链接--execCommandlet 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';//隐藏inputdocument.body.removeChild(input);//移除inputif (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 网站下才能使用。
根据你的需求和浏览器兼容性考虑,选择适合的复制方法即可。