码迷,mamicode.com
首页 > 其他好文 > 详细

前端点击按钮复制内容

时间:2019-12-22 20:28:45      阅读:371      评论:0      收藏:0      [点我收藏+]

标签:ack   lex   exp   技术   spl   com   his   command   append   

一、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>

前端点击按钮复制内容

标签:ack   lex   exp   技术   spl   com   his   command   append   

原文地址:https://www.cnblogs.com/whycai/p/12080564.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!