复制内容至剪切板使用的是插件’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
}

 

Logo

前往低代码交流专区

更多推荐