Vue 复制到剪切板

• 第一种：VUE响应函数方式

  复制动作使用的是VUE响应函数方式，这就为复制前控制数据提供了可能。

  // 复制之前可以进行数据处理，点击事件
  share(val) {
    //数据处理
    this.message = this.message + ' ' + val
    let _that = this;
    this.$copyText(this.message).then(function (e) {
      alert('Copied')
      alert('_that'，_that )
    }, function (e) {
      alert('Can not copy')
    })
  },
  

• 第二种：插件 vue-clipboard2

  1、安装vue-clipboard2插件

  npm install --save vue-clipboard2
  

  2、main.js 引入

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

  3、使用例子

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

• 传送门：https://www.npmjs.com/package/vue-clipboard2

• 传送门：https://juejin.cn/post/6967164792993742885