vue如何实现一键复制（vue-clipboard2）

1.安装vue-clipboard2插件

npm install --save vue-clipboard2

2.检查是否安装成功

在package.json内检查

3.在main.js内添加

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

4.应用

方式一：

<template>
  <div class="container">
   {{qq}}
   <button type="button" 
           v-clipboard:copy="qq"
           v-clipboard:success="onCopy"
           v-clipboard:error="onError">复制QQ</button>
   </div>
</template>
 
<script>
export default {
  data() {
    return {
      qq:'123456 '
    }
  },
  methods: {
     onCopy: function (e) {
       alert('复制成功： ' + e.text)
     },
     onError: function (e) {
       alert('复制失败')
     }
   }
 }
</script> 

方式二：

  <template>
    <div class="container">
    {{qq}}
    <button type="button" @click="doCopy">复制QQ</button>
    </div>
  </template>
 
  <script>
export default {
    data() {
       return {
         qq: '123456'
       }
     },
     methods: {
       doCopy: function () {
          this.$copyText(this.qq).then(function (e) {
             alert('复制成功')
             console.log(e)
          }, function (e) {
              alert('复制失败')
              console.log(e)
          })
        }
     }
  }
  </script> 

官方文档地址：https://www.npmjs.com/package/vue-clipboard2