美文网首页
vue 实现点击复制文本

vue 实现点击复制文本

作者: 工程狮子 | 来源:发表于2020-10-22 15:25 被阅读0次

    1.引入插件clipboard.js方法如下:
    直接npm安装: npm install clipboard --save

    2.在需要使用的组件中important
    引用方法:important Clipboard from 'clipboard'
    3.添加需要复制的内容
    例如:

    //  data-clipboard-taxt 里面就是我们需要复制的文本
    <button class="tag-read" data-clipboard-text="我是可以复制的内容,请点击复制" @click="copy">复制</button>
    

    4.添加点击后的方法

    copy () {
       var clipboard = new Clipboard('.tag-read')
       clipboard.on('success', e => {
          console.log('复制成功')
          //  释放内存
         clipboard.destroy()
       })
        clipboard.on('error', e =>{
         // 不支持复制
         console.log('该浏览器不支持复制')
         // 释放内存
         clipboard.destroy()
       })
    }
    

    以上就是给大家实现点击复制的方法 大家项目有需求可以试试

    相关文章

      网友评论

          本文标题:vue 实现点击复制文本

          本文链接:https://www.haomeiwen.com/subject/amzumktx.html