前端点击按钮复制内容

一、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>
posted @ 2019-12-22 18:22  菜小鱼~  阅读(3292)  评论(0)  编辑  收藏  举报