clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中，clipboard.js 是一个不依赖 Flash,将文本复制到剪贴板的插件，仅仅 2kb。
下面简单介绍一下它的使用步骤:
1.安装

npm install clipboard --save

2.在项目根目录下创建一个文件夹，在里面封装clipboard.js相关的代码
比如:plugin/copy.js

//copy.js
//拷贝插件 kay
// import iView from 'iview';
import Clipboard from 'clipboard';
let CopyText = new Object();
CopyText.install = function (Vue, options) {
    console.log(Vue, '拷贝')
    // 4. 添加实例方法
    // text,    要copy的文本
    // success, 成功回调函数
    // error    失败回调函数
    Vue.prototype.$CopyText = function (text, success, error) {
        // 逻辑...
        let oCopyBtn = document.createElement('button');
        oCopyBtn.setAttribute('id', 'copy-btn');
        oCopyBtn.setAttribute('data-clipboard-text', text);
        document.body.appendChild(oCopyBtn);
        var clipboard = new Clipboard('#copy-btn');
        clipboard.on('success', e => {
            success(e);
            // console.log('复制成功');
            // iView.Message.success(`复制成功！`);
            // 释放内存
            clipboard.destroy();
            //移除节点
            document.body.removeChild(oCopyBtn);
        });
        clipboard.on('error', e => {
            error(e);
            // 不支持复制
            //console.log('该浏览器不支持自动复制')
            // iView.Message.error(`复制失败！`);
            // 释放内存
            clipboard.destroy();
            //移除节点
            document.body.removeChild(oCopyBtn);
        });
        //模拟点击
        oCopyBtn.click();
    }
};

export default CopyText;

3.在main.js中使用插件

import CopyText from './plugin/copy.js';
//...你的其它代码
Vue.use(CopyText);

4.在vue组件中使用
比如在About.vue

<template>
  <div>
    <!-- Target -->
    <input id="foo" value="https://github.com/zenorocha/clipboard.js.git" />
    <!-- Trigger -->
    <el-button
      type="primary"
      style="color: white"
      class="btn"
      @click="handleCopy"
    >
      点击复制
    </el-button>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      value: new Date(),
    };
  },
  components: {},
  methods: {
    handleCopy() {
      var text = document.getElementById("foo").value;
      this.$CopyText(
        // 要拷贝的文本,
        text,
        (e) => {
          //something to do
          this.$message.success("复制成功！"); //例：iview ui框架的提示
        },
        (e) => {
          //something to do
          this.$message.error("复制失败！");
        }
      );
    },
  },
};
</script>

<style>
span {
  color: white;
}
</style>

这样就将input输入框中的内容复制到剪切板了