vue 复制到粘贴板组件 vue-clipboard2

参考：

https://www.jb51.net/article/160136.htm

https://blog.csdn.net/JackieDYH/article/details/115551105

官网（推荐）：

https://www.npmjs.com/package/vue-clipboard2

安装

npm install --save vue-clipboard2

引入

import Vue from 'vue'
import Clipboard from 'vue-clipboard2'
Vue.use(Clipboard)

vue文件中使用

<template>
    <div>
        <button type="dashed"
          v-clipboard:copy="code"
          v-clipboard:success="copyAddress"
          v-clipboard:error="copyAddressError"
        >复制内容</button>
    </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      code : '20200829-20210324-20210329'
    };
  },
  methods:{
    // 复制
    copyAddress(e){
      console.log(e,"copyAddress");
    },
    copyAddressError(e){
      console.log(e,'copyAddressError');
    }
  }
};
</script>

vue文件方法中直接调用

<div id="app"></div>
  <template id="t">
    <div class="container">
    <input type="text" v-model="message">
    <button type="button" @click="doCopy">Copy!</button>
    </div>
  </template>
  <script>
  new Vue({
    el: '#app',
    template: '#t',
    data: function () {
      return {
        message: 'Copy These Text'
      }
    },
    methods: {
      doCopy: function () {
        this.$copyText(this.message).then(function (e) {
          alert('Copied')
          console.log(e)
        }, function (e) {
          alert('Can not copy')
          console.log(e)
        })
      }
    }
  })
</script>