JS 一键复制功能实现

1.原生方法实现：
document.execCommand()语法
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument) 返回值是布尔值，表示是否支持。
aCommandName: 命令名字,copy,cut等
aShowDefaultUI:一个 Boolean， 是否展示用户界面，一般为 false。
aValueArgument:一些命令（例如insertImage）需要额外的参数（insertImage需要提供插入image的url），默认为null,一般不用。

由于document.execCommand()只能操作可编辑区域，即,,这样就要动态添加可编辑区域再删除。例如：</p> <div hidden id="keydiv">Hello World</div> <btn class="btn btn-sm btn-default" onclick="copyText()">点此复制</btn> <script> function copyText() { var Url2 = document.getElementById("keydiv").innerText; var oInput = document.createElement('input'); oInput.value = Url2; document.body.appendChild(oInput); oInput.select(); document.execCommand("Copy"); oInput.style.display = 'none'; alert('复制成功'); } </script> 2.使用 clipboard插件：官网 https://clipboardjs.com/ <p>安装：npm install clipboard --save<br> 引入：import clipboard from 'clipboard';<br> Vue.prototype.clipboard = clipboard;<br> 或 <a href="https://www.bootcdn.cn/clipboard.js/" target="_blank">https://www.bootcdn.cn/clipboard.js/</a><br> 使用：<br> 　　　　　　<button class="btn" data-clipboard-text="复制内容" @click="copyLink"><br> 　　　　　　　　复制按钮<br> 　　　　　　</button><br> 　　　　　　copyLink() {<br> 　　　　　　　　var clipboard = new ClipboardJS('.btn');<br> clipboard.on('success', function (e) {<br> console.log("复制成功")<br> clipboard.destory();<br> });<br> clipboard.on('error', function (e) {<br> clipboard.destory();<br> console.log("复制失败")<br> });<br> 　　　　　　}</p>