zoukankan      html  css  js  c++  java
  • vue点击实现复制

    首先先安装模块工具

    cnpm install clipboard --save

    在当前页面引入模块

    import Clipboard from 'clipboard'; 

    使用:
    html代码

    <div class="box">我的邀请码:<span class="inviteCode" >XF684V1G</span><span class="copy order-id" :data-clipboard-text="'XF684V1G'" @click="copy">复制</span></div>

    页面样式


    点击复制之后的js

    copyID () {
          var clipboard = new Clipboard('.order-id') //绑定数据标签的类名
          clipboard.on('success', e => {
            Toast('邀请码已复制');
            // 释放内存
            clipboard.destroy()
          })
          clipboard.on('error', e => {
            console.log('该浏览器或手机权限不支持复制功能');
            // 释放内存
            clipboard.destroy()
          })
        },

    注意:order-id类名 和 :data-clipboard-text 需要绑定在复制按钮上

  • 相关阅读:
    bzoj2959
    学习笔记::lct
    bzoj3203
    bzoj1319
    bzoj3625
    bzoj3992
    bzoj1565
    bzoj3513
    平常练习动归(1.胖男孩)———最长公共子序列
    2016 noip 复赛 day2
  • 原文地址:https://www.cnblogs.com/tlfe/p/14713795.html
Copyright © 2011-2022 走看看