zoukankan      html  css  js  c++  java
  • vue中点击复制粘贴功能 clipboard 移动端

    页面是由 v-for 循环渲染出来,要给每一个结构里面的复制按钮加一个复制功能

      npm install clipboard --save    安装,如果安装处问题,多安装几次,我自己也安装了好几次

    import Copy1 from 'clipboard'  在复制功能的页面引用

    在mounted生命周期里面:
    mounted () {
    this.clipboard = (text) => {
    console.log(text, event)
    const cb = new Copy1('.t', {
    text: () => { return text.accountName + ' ' + text.bankName + ' ' + text.bankBigNumber + ' ' + text.bankNumber }
    })
    cb.on('success', (e) => {
    this.$vux.toast.show({
    type: 'text',
    text: '复制成功'
    })
        cb.destroy()   //这行代码很重要,
          e.clearSelection() // 这一行不知道有什么用,写在那没管它
    })
    cb.on('error', (e) => {
    })
    }
    }
    clipboard 这个变量是预先存在data里面的,用来存一个函数,函数里面定义整个复制的过程
    new Copy1执行,传的第一个参数是一个class类名,这个类名直接添加在自己的复制按钮上就可以,v-for循环后,那么每一个复制按钮都有了这个类名
            第二个参数是一个对象,定义要复制的内容,
    之后用on来监听成功事件,成功后给一个弹窗提示,然后e.clearSelection()清除一下

    Copy (id, event) {
    let newArr = this.list.filter((item, index) => {
    if (id === item.id) {
    return item
    }
    })
    this.clipboard(newArr[0])
    }
    Copy事件是定义在复制按钮上,接收了当前循环数据的id,以及事件对象,根据id拿到具体想复制的内容,在下面函数执行中传出去,因为我要同时复制多个内容,所以上面返回的text里面写了好几个,并且用换行符隔开

    亲测,这个方法在ios和Android上都是友好的,看到我文章的朋友大胆用,欢迎讨论
  • 相关阅读:
    【ABAP系列】SAP LSMW(摘自官网)
    【ABAP系列】SAP ABAP POPUP弹出框自建内容
    【ABAP系列】SAP ABAP ALV中的TOP_OF_PAGE添加任意图标
    彻底关闭Windows Defender丨Win10
    word中怎样设置页码包含总页数
    10款流行的Markdown编辑器,总有一款适合你
    MyEclipse安装插件
    Eclipse集成SonarLint
    MyEclipse中阿里JAVA代码规范插件(P3C)的安装及使用
    详述 IntelliJ IDEA 插件的安装及使用方法
  • 原文地址:https://www.cnblogs.com/rrene/p/10254122.html
Copyright © 2011-2022 走看看