Vue 复制到剪切板

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

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

// 复制之前可以进行数据处理，点击事件
share(val) {
  //数据处理
  this.message = this.message + ' ' + val
  this.$copyText(this.message).then(function (e) {
    alert('Copied')
  }, 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

标签：复制到,function,vue,alert,Vue,clipboard2,剪切板,message
来源： https://www.cnblogs.com/DL-CODER/p/16519561.html