浏览器/H5复制链接功能

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

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