JS插件，一键复制，clipboard.js 使用记录

clipboard介绍

clipboard.js的出现很好的解决了这个问题，它不但体积小，使用也非常的方便几行代码即可完成，可以实现纯 JavaScript （无 Flash）的浏览器内容复制到系统剪贴板的功能。

项目用到了，我这边就记录一下使用的方法

安装

npm install --save clipboard

引入

import ClipboardJS from 'clipboard';

使用方法一

<template>
       <span>{{ code }}</span>
       <el-button @click="copyActiveCode($event,code )"> 点击复制</el-button>
</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>{{ codecontant }}</span>
       <i
       id="tag-copy" <-- 作为选择器的标识使用用class也行 -->
       :data-clipboard-text="codecontant"  <-- 这里放要复制的内容 -->
       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()
      })
    }

我使用的是第二种方法，感觉还挺方便的，暂时没有遇到什么BUG