vue 复制粘贴

场景：

在项目中，需要开发一个复制邀请码的功能，也就是点击复制按钮就将邀请码复制到粘贴板，直接粘贴即可。

使用到的是 vue-clipboard2 插件，简单又好用

首先，需要先安装这个插件

npm install --save vue-clipboard2

然后，在vue 项目中的 main.js 中引入

import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'    // 引入
 
Vue.use(VueClipboard)    // vue全局使用插件

在具体页面使用，使用方法有两种：

其一：

<template id="demo">
  <div>
    <p>{{message}}</p>
    <button type="button"
      v-clipboard:copy="message"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError">复制</button>
  </div>
</template>
 
<script>
 
export default {
  data() {
    return {
      message: '要复制的内容'
    }
  },
  methods: {
    // 复制成功
    onCopy: function (e) {
      console.log('成功复制： ' + e.text)
    },
    // 复制失败
    onError: function (e) {
      console.log('复制失败')
    }
  }
}
</script> 

其二：

 <template id="t">
    <div class="container">
    <p>{{message}}</p>
    <button type="button" @click="doCopy">复制</button>
    </div>
  </template> 
<script>
 
export default {
  data() {
    return {
      message: '要复制的内容'
    }
  },
 methods: {
   doCopy: function () {
    //let that=this
     this.$copyText(this.message).then(function (e) {
        console.log('复制成功',e.text)
       //that.$message.success("复制成功");
     }, function (e) {
        console.log(e)
        console.log('不能复制，复制失败')
     })
   }
 }
}
</script> 

个人使用体验：两种方法在实际的操作当中都是很方便的，也比较简单，使用中暂时没有什么问题。希望可以帮到你。

npm官方地址：vue-clipboard2