原生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 插件庫