前端点击按钮复制内容
Posted whycai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端点击按钮复制内容相关的知识，希望对你有一定的参考价值。
一、VUE
效果：
代码：
1 <template> 2 <div> 3 <el-row style="height:40px" type="flex"> 4 <el-col :span="6"> 5 <p>{{res}}</p></el-col> 6 <el-col :span="2"> 7 <el-button type="button" @click="copy()">复制</el-button> 8 </el-col> 9 10 </el-row> 11 </div> 12 </template> 13 <script> 14 export default { 15 data() { 16 return { 17 res: ‘要复制的内容‘, 18 } 19 }, 20 21 methods: { 22 copy() { 23 this.$copyText(this.res).then(function (e) { 24 alert(‘已复制‘) 25 26 }, function (e) { 27 alert(‘复制失败‘) 28 }) 29 }, 30 31 32 } 33 } 34 </script>
二、html
效果：
代码：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 </head> 5 <body> 6 <div> 7 <span id="copy">复制的内容</span> 8 <button type="button" onclick="copy()">复制</button> 9 10 </div> 11 </body> 12 <script type="text/javascript" src="static/js/jquery.min.js"></script> 13 <script type="text/javascript" src="static/js/main.min.js"></script> 14 <script type="text/javascript"> 15 function copy() { 16 var copyTest = document.getElementById("copy").innerText; 17 var inputTest = document.createElement(‘input‘); 18 inputTest.value = copyTest; 19 document.body.appendChild(inputTest); 20 inputTest.select(); 21 document.execCommand("Copy"); 22 inputTest.className = ‘oInput‘; 23 inputTest.style.display = ‘none‘; 24 alert(‘复制成功‘); 25 } 26 </script> 27 28 </html>
以上是关于前端点击按钮复制内容的主要内容，如果未能解决你的问题，请参考以下文章