需求开发过程中遇到的需求需要复制 请求过来的一段密令（类似支付宝淘宝口令）到剪切板。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); //利用延时器防止内容没有及时更新等导致报错 }) }}也可以做一些复制成功与否的判断：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，暂时还未发现有兼容问题的存在，如果遇到了我再来及时更新最后感谢各位大佬的参阅，如果有什么问题都可以在评论区提出。如果觉得对您有帮助的话，也可点个赞，点个收藏，点关注不迷路。