需求

开辟过程当中碰到的需求须要复制 要求过来的一段密令（相似支付宝淘宝口令）到剪切板。

pc端的文本复制到剪切板

假如是在pc端的话，能够直接运用原生js举行编写，代码以下：

<textarea id="input">这是被复制的内容</textarea>
<button onclick="copyText()">copy</button>


<script type="text/javascript">
    function copyText() {
        var text = document.getElementById("text").innerText;
        var input = document.getElementById("input");
        input.value = text; // 修正文本框的内容
        input.select(); // 选中文本
        document.execCommand("copy"); // 实行浏览器复制敕令
        alert("复制胜利");
    }
</script>

然则这类要领在挪动端会有一些问题，我是在微信民众号开辟，发如今微信浏览器中会失效。

网上搜了下，clipboard.js是个相对比较靠谱的第三方。

clipboard.js

官方github

现在的star 25k ⭐️

大佬的中文翻译

归纳综合一下

两种体式格局，一种合适复制牢固的文本，另一种合适复制从后端猎取的数据文本;

具体操作

装置

经由过程npm装置

npm install clipboard --save

经由过程script+链接导入,能够去BootCDN复制个本身想要的

<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.js"></script>

运用

假如是vue文件，只须要在相干的组件中举行clipboard.js导入马上。

import Clipboard from "clipboard";

编写须要举行复制的相干代码

假如是复制牢固文本则以下：

<button
    class="copy-btn"
    @click="getAnswerNiceName"
    ref="copy"
    data-clipboard-text="这是牢固的须要被复制到剪切板的内容"
>复制口令</button>

假如是复制从服务器猎取的数据则以下：

<input
    id="copy-input"
    readonly       //假如在挪动端，一定要再input中加上`readonly`属性，否则会拉起手机输入框
/>               //这个input能够举行响应的隐蔽，比方相对定位等    
<button
    class="copy-btn"
    @click="handleCopy"
    ref="copy"
    data-clipboard-action="copy"
    data-clipboard-target="#copy-input"
>复制口令</button>

....

methods: {
    handleCopy(){
        axios.post('要求链接').then(res=>{
            var input = document.getElementById("copy-input");
            input.value = res.data      //将猎取的数据复制给input
            setTimeout(() => {
                  const copybtn = this.$refs.copy;
                  this.clipboard = new Clipboard(copybtn);
            }, 100);                      //应用延时器防备内容没有实时更新等致使报错
        })
    }
}

延时器代码部份，也能够运用vue供应的 nextTick 要领。 //谢谢 Grewer 大佬的批评看法

运用该要领，会在下次 DOM 更新轮回完毕以后实行耽误回调。在修正数据以后马上运用这个要领，猎取更新后的 DOM。代码以下：

this.$nextTick(() => {
    const copybtn = this.$refs.copy;
    this.clipboard = new Clipboard(copybtn);
});

也能够做一些复制胜利与否的推断：

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
    alert('复制胜利，您复制的链接为'+e.text);
    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
    alert('复制失利')
});

这位大佬的demo代码也能够举行参考，亲测有效 -> 运用clipboard.js完成js复制黏贴的功用

能够存在的兼容性问题

网上说这个插件能够存在一些兼容性问题，我本身测试了多个手机，包含安卓和ios，临时还未发现有兼容问题的存在，假如碰到了我再来实时更新

末了

谢谢列位大佬的参阅，假如有什么问题都能够在批评区提出。

假如以为对您有协助的话，也可点个赞，点个珍藏，点关注不迷路。