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>
  • 相关阅读:
    MacOS更改zsh命令行前缀
    python中os._exit()和sys.exit(), exit(0)和exit(1) 的用法和区别
    如何解析 redis 的 rdb 文件
    流量回放工具<二>
    策略路由配置<一>
    h3c镜像模式配置
    python上传gz文件请求
    优先队列(大顶堆实现)
    bm和kmp和bf
    dedecms 软件下载模块加入flashget快车下载代码
  • 原文地址:https://www.cnblogs.com/whycai/p/12080564.html
Copyright © 2011-2022 走看看