clipboard 在 vue 中的使用

简介

页面中用 clipboard 可以进行复制粘贴，clipboard能将内容直接写入剪切板

安装



npm install --save clipboard

使用方法一



&lt;template&gt;

       &lt;span&gt;{{ code }}&lt;/span&gt;

       &lt;i

       class="el-icon-document"

       title="点击复制"

       @click="copyActiveCode($event,code )"/&gt;

&lt;/template&gt;

// methods

copyActiveCode(e, text) {

      const clipboard = new Clipboard(e.target, { text: () =&gt; text })

      clipboard.on('success', e =&gt; {

        this.$message({ type: 'success', message: '复制成功' })

        // 释放内存

        clipboard.off('error')

        clipboard.off('success')

        clipboard.destroy()

      })

      clipboard.on('error', e =&gt; {

        // 不支持复制

        this.$message({ type: 'waning', message: '该浏览器不支持自动复制' })

        // 释放内存

        clipboard.off('error')

        clipboard.off('success')

        clipboard.destroy()

      })

      clipboard.onClick(e)

    }

使用方法二



&lt;template&gt;

       &lt;span&gt;{{ code }}&lt;/span&gt;

       &lt;i

       id="tag-copy" &lt;-- 作为选择器的标识使用用class也行 --&gt;

       :data-clipboard-text="code"  &lt;-- 这里放要复制的内容 --&gt;

       class="el-icon-document"

       title="点击复制"

       @click="copyActiveCode($event,code)"/&gt;

&lt;/template&gt;

// methods

copyActiveCode() {

      const clipboard = new Clipboard("#tag-copy")

      clipboard.on('success', e =&gt; {

        this.$message({ type: 'success', message: '复制成功' })

        // 释放内存

        clipboard.destroy()

      })

      clipboard.on('error', e =&gt; {

        // 不支持复制

        this.$message({ type: 'waning', message: '该浏览器不支持自动复制' })

        // 释放内存

        clipboard.destroy()

      })

    }

原文地址：https://segmentfault.com/a/1190000016726633

巴特西

clipboard 在 vue 中的使用

简介

安装

使用方法一

使用方法二

最新文章

热门文章