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.案例

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

<template>
  <div class="yeluosen">
    <input type="text" v-model="message">
    <el-button 
      icon="el-icon-share" 
      size="mini" 
      style="font-size: 16px;padding: 4px 8px;" 
      title="共享" 
      v-clipboard:copy="scope.row.url" 
      v-clipboard:success="onCopy" 
      v-clipboard:error="onError" 
      @click="share(scope.row.url)"></el-button>
  </div>
</template>

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