浏览器/H5复制链接功能

本文主要是介绍浏览器/H5复制链接功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

方法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 网站下才能使用。

根据你的需求和浏览器兼容性考虑，选择适合的复制方法即可。

这篇关于浏览器/H5复制链接功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---