1、vue-clipboard2的介绍

        vue-clipboard2是前端能够调用剪切板的一个插件，可以实现复制内容到剪切板。

        npm地址：vue-clipboard2 - npm

        github地址：https://github.com/Inndy/vue-clipboard2

2、vue-clipboard2的安装

npm install --save vue-clipboard2

3、使用

• 使用前进行注册

import Vue from 'vue'

import VueClipBoard from 'vue-clipboard2'

Vue.use(VueClipBoard);

3.1 第一种使用：使用指令的方式进行绑定

<template>
    <input type="text" v-model="message">
    <!-- copy内填写属性名 -->
    <button type="button"
        v-clipboard:copy="message"
        v-clipboard:success="firstCopySuccess"
        v-clipboard:error="firstCopyError">复制</button>
</template>  

• 对应的事件方法

<script>
export default {
  data() {
    return {
      message: "A simple vuejs 2 binding for clipboard.js!"
    };
  },
  methods: {
    firstCopySuccess(e) {
      console.log("copy arguments e:", e);
      alert("复制成功!");
    },
    firstCopyError(e) {
      console.log("copy arguments e:", e);
      alert("复制失败!");
    }
  }
};
</script>

3.2 第二种使用：this.$copyText()方法进行复制

• 对应的源代码块

• 操作

<button @click="copyData">第二种方式复制</button>

• 对应的事件方法

methods: {
    copyData(){
        //如果不需要回调：
        this.$copyText(this.message)
        //如果需要回调：
        this.$copyText(this.message).then( e => {
            alert('复制成功')
            console.log(e)
        }, function (e) {
            alert('复制失败')
            console.log(e)
        })
    }
}