Vue 实现复制到粘帖板功能(两种使用方法)

复制内容至剪切板使用的是插件’vue-clipboard2’,如下：

1. 安装vue-clipboard（ 出现错误的话，可以试试 npm config set registry https://registry.npm.taobao.org）

npm install --save vue-clipboard2

2.main.js引入

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

3.案例

第一种方法：直接将变量内容复制至剪切板，暂时没有找到处理数据后再复制的方式

复制时，通过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
}