Vue3 实现文本复制到剪贴板

 方法一：【被取代】

<span class="look-value" id="copyText">被复制的文本</span>

<input id="input" value="这是幕后黑手" style="opacity:0;position:absolute" />

<el-button type="primary" size="small" @click="copyText">复制</el-button>

copyText() {
    const text = document.getElementById('copyText')!.innerText; // 复制文本
    const input = document.getElementById('input')! as any; // 承载复制内容
    input.value = text; // 修改文本框的内容
    input.select(); // 选中文本
    document.execCommand('copy'); // 执行浏览器复制命令
},

方法二：【被取代】

<input ref="inputCopy" value="这是幕后黑手" style="opacity:0;position:absolute" />

<el-button type="primary" size="small" @click="copyText">复制</el-button>

copyText() {
    const text = '被复制的文本'; // 复制文本
    const input = proxy.$refs.inputCopy
    input.value = text; // 修改文本框的内容
    input.select(); // 选中文本
    document.execCommand('copy'); // 执行浏览器复制命令
},

注意：input 元素，不能使用 disable 属性，也不能设置 v-if 和 hidden 隐藏。只能通过 opacity 和 position 来控制。 

方法三：

Clipboard API - Web API 接口参考 | MDN

剪贴板 Clipboard API 提供了响应剪贴板命令（剪切、复制和粘贴）与异步读写系统剪贴板的能力。

从权限 Permissions API 获取权限之后，才能访问剪贴板内容；如果用户没有授予权限，则不允许读取或更改剪贴板内容。

该 API 被设计用来取代使用 document.execCommand() 的剪贴板访问方式。