方法一:【被取代】

<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() 的剪贴板访问方式。

Logo

前往低代码交流专区

更多推荐