原生js实现复制功能


浏览器提供了 copy 命令 ,可以复制选中的内容:document.execCommand("copy")


var text = document.getElementById("text").innerText;
var input = document.getElementById("input");
input.value = text; // 修改文本框的内容
input.select(); // 选中文本
document.execCommand("copy"); // 执行浏览器复制命令
alert("复制成功");


JS部分:

copy(tar) {
let $el = this.$refs[tar];
$el.select();
$el.setSelectionRange(0, $el.getAttribute("link").length);
try {
document.execCommand("copy");
this.copyRes = "複製成功";
setTimeout(() => {
this.copyRes = "";
}, 3000);
} catch (err) {
console.log(err);
}
},


HTML部分:

<div class="code-input">
<input
ref="foo"
:link="shareLink"
readonly
v-model="shareLink"
/>
<div
class="clipboard-btn copy-btn"
data-clipboard-target="#foo"
@click="copy('foo')"
>
複製
</div>
</div>


除此之外,还可以用clicbord.js 插件库


原文地址:https://www.cnblogs.com/catherLee/p/12936839.html