Vue中点击按钮复制内容

Posted 2023-04-28

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue中点击按钮复制内容相关的知识，希望对你有一定的参考价值。

参考技术A copyURL(val)

      const transfer = document.createElement("input");

      document.body.appendChild(transfer);

      transfer.value = val; // 这里表示想要复制的内容

      transfer.select();

      if (document.execCommand("copy"))

        this.$message(

          type: "success",

          message: "复制成功"

        );

       else

        this.$message.error(`当前浏览器暂不支持该功能，请手动复制`);



      document.body.removeChild(transfer);

    ,

前端点击按钮复制内容

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

以上是关于Vue中点击按钮复制内容的主要内容，如果未能解决你的问题，请参考以下文章

Vue中点击按钮 复制内容

前端点击按钮复制内容

Vue中点击按钮复制内容