zoukankan      html  css  js  c++  java
  • h5在手机端实现简单复制

    <a href="https://blog-static.cnblogs.com/files/ruanqin/clipboard.min.js">下载clipborrdjs</a> 

    下载地址:https://blog-static.cnblogs.com/files/ruanqin/clipboard.min.js

    html中:

    <div id="app">

      <a href="javascript:;" @click="copyClick" class="copy" data-clipboard-text="要让复制的内容" data-clipboard-action="copy" >点击复制ID</a>

    </div>

    在js中:

    new Vue({
      el: '#app',
      data: function () {
        return {
        }
      },
      methods: {
        copyClick: function(){
          var clipboard = new Clipboard("#copyBtn");
          clipboard.on('success', function(e) {
            MINT.Toast("复制成功:"+e.text);
          });
          clipboard.on('error', function(e) {
            MINT.Toast("请重试");
          });
        }
      },
      created: function(){
        var that = this;
      })

    如此简单的就实现复制了

    在vue中使用 

    1. 引入clipboard.js

      npm install clipboard --save  

    2. 在需要使用的组件中import
      import Clipboard from 'clipboard';  
    3. 添加需要复制的内容  

      <li class="warp-li copy" id="copyBtn" data-clipboard-text="shou-a666" @click="copy">
        <img src="../assets/img/icom_weixin@2x.png" alt="">
        <p>shou-a666</p>
      </li>

    4. methods中写入copy方法

      copy() {    

        let that = this;
        let clipboard = new Clipboard('#copyBtn')
        clipboard.on('success', e => {
          that.$toast("复制成功:"+e.text)
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          console.log('该浏览器不支持自动复制')
          clipboard.destroy()
        })

          }  

     

  • 相关阅读:
    实体类实现序列化
    异常处理
    Springboot的模块化使用
    Springboot的开始
    RxJava用法
    okhttp的Post方式
    OKhttp使用
    soundPool声音池
    ScheduledExecutor定时器
    timer定时器
  • 原文地址:https://www.cnblogs.com/sklhtml/p/9361197.html
Copyright © 2011-2022 走看看