js实现复制内容到剪贴板

Posted 2020-11-24

一、 原生js实现，电脑可以用，手机不可以用

　　1. 必须是 input元素 才可以使用

　　　　<input id="code" type="text" value="www">

　　　　<span class="copy-btn" v-on:click="copy">复制</span>

　　　　//获取input并执行选中

　　　　document.getElementById(‘code‘).select();

　　　　//执行documen的copy事件
　　　　document.execCommand(‘copy‘);

二、clipboard.js 实现，电脑、手机都可以用  https://github.com/zenorocha/clipboard.js

　　1.  input、div 任何元素都可以使用

　　　　<span id="code">123456</span>

　　　　<span class="copy-btn" data-clipboard-target="#code" v-on:click="copy">复制</span>

　　　　let clipboard = new ClipboardJS(‘.copy-btn‘);
　　　　clipboard.on(‘success‘, function(e) {
　　　　　　//复制成功
　　　　　　console.log("复制成功");
　　　　　　//取消选中
　　　　　　e.clearSelection();
　　　　});