zoukankan      html  css  js  c++  java
  • 前端点击按钮复制内容

    一、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>
  • 相关阅读:
    redis同步指定key数据到其他redis中
    Golang 生成随机数
    怎么理解“平均负载”? 进行分析等
    Golang打印空心金字塔for循环实现
    python十几行代码实现三级菜单
    mysql增量恢复
    python内建函数
    python练习题总结
    迭代器和生成器
    python基础数据类型
  • 原文地址:https://www.cnblogs.com/whycai/p/12080564.html
Copyright © 2011-2022 走看看