VUE实现复制到剪切板的功能的2种方法

VUE实现复制到剪切板的功能的方法：

第一种方法vue-clipboard2：
1，安装vue-clipboard2插件

npm install --save vue-clipboard2

2，main.js引入

import VueClipboards from 'vue-clipboard2'
Vue.use(VueClipboards);

3，使用例子

<el-button
    type="text"
    class="password-input"
    v-clipboard:copy="developPass.password"
    v-clipboard:success="onCopy"
    v-clipboard:error="onError"
>复制</el-button>

// 复制时，通过v-clipboard:copy 复制输入的内容：

// 复制成功 or 失败（提示信息！！！）
onCopy: function (e) {
  console.log('复制成功！')
},
onError: function (e) {
  console.log('复制失败！')

这种方法复制内容到剪切板，好像不支持复制之前做数据处理操作，暂时不懂有什么方法，只是先做个笔记，简单的处理复制到剪切板的复制功能，请谅解~

第二种复制的方法

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

// 点击事件
share(val) {
  this.handleData(val)
  this.$copyText(this.message).then(function (e) {
    alert('Copied')
  }, function (e) {
    alert('Can not copy')
  })
},
 
//数据处理
handleData(val){
  this.message = this.message + ' ' + val
}