脚本宝典收集整理的这篇文章主要介绍了clipboard 在 vue 中的使用，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

简介

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

安装

npm install --save clipboard

使用方法一

<template>
       <span>{{ code }}</span>
       <i
       class="el-icon-document"
       title="点击复制"
       @click="copyActiveCode($event,code )"/>
</template>
// methods
copyActiveCode(e, text) {
      const clipboard = new Clipboard(e.target, { text: () => text })
      clipboard.on('success', e => {
        this.$message({ type: 'success', message: '复制成功' })
        // 释放内存
        clipboard.off('error')
        clipboard.off('success')
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        this.$message({ type: 'waning', message: '该浏览器不支持自动复制' })
        // 释放内存
        clipboard.off('error')
        clipboard.off('success')
        clipboard.destroy()
      })
      clipboard.onClick(e)
    }

使用方法二

<template>
       <span>{{ code }}</span>
       <i
       id="tag-copy" <-- 作为选择器的标识使用用class也行 -->
       :data-clipboard-text="code"  <-- 这里放要复制的内容 -->
       class="el-icon-document"
       title="点击复制"
       @click="copyActiveCode($event,code)"/>
</template>
// methods
copyActiveCode() {
      const clipboard = new Clipboard("#tag-copy")
      clipboard.on('success', e => {
        this.$message({ type: 'success', message: '复制成功' })
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        this.$message({ type: 'waning', message: '该浏览器不支持自动复制' })
        // 释放内存
        clipboard.destroy()
      })
    }

脚本宝典总结

以上是脚本宝典为你收集整理的clipboard 在 vue 中的使用全部内容，希望文章能够帮你解决clipboard 在 vue 中的使用所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。