vue实现点击复制的两种方法

原生方法

1、选中复制

<template>
  <div>
    <el-button type="primary" plain @click="copy()">复制</el-button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      
    }
  },
  methods:{
    copy(){
        document.execCommand("Copy"); // 执行浏览器复制命令
        this.$message({
          message: '复制成功',
          type: 'success'
        });
      },
  }
}
</script>

2、点击复制（我是在vue+element UI中实现点击表格中的按钮复制表格中的数据）

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleCopy(scope.$index, scope.row)">复制</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data(){
    return{
      tableData:{
        name:'小明'
      },
      copyData:null,
    }
  },
  methods:{
    handleCopy(index,row){
      this.copyData = row.name
      this.copy(this.copyData)
    },
    copy(data){
        let url = data;
        let oInput = document.createElement('input');
        oInput.value = url;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象;
        console.log(oInput.value)
        document.execCommand("Copy"); // 执行浏览器复制命令
        this.$message({
          message: '复制成功',
          type: 'success'
        });
        oInput.remove()
      },
  }https://registry.npm.taobao.org
}
</script>

使用插件（vue-clipboard2）

1. 安装vue-clipboard

npm install --save vue-clipboard2

（ 出现错误的话，可以试试 npm config set registry https://registry.npm.taobao.org ）

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
}
``