vue项目中实现复制粘贴功能的两种办法

第一种办法：

1、引入插件

npm install --save vue-clipboard2

2、在mian.js中引入

import VueClipboard from vue-clipboard2 //引入插件
Vue.use(VueClipboard) //安装插件

3、在组件间中使用

<template>
  <div>
    <span
      v-clipboard:copy="message"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError"
    >
      复制
    </span>
  </div>
</template>

<script>
export default {
          
   
  data() {
          
   
    return {
          
   
      message: "",
    };
  },
  mounted() {
          
   
    this.onload();
  },
  methods: {
          
   
    onload() {
          
   
    //这里的message是字符串不能是数字
      this.message = "hhhhhhhh";
    },
    onCopy: function (e) {
          
   
      console.log(e);
      console.log("复制成功！");
    },
    onError: function (e) {
          
   
      console.log(e);
      console.log("复制失败！");
    },
  },
};
</script>

第二种办法

复制表格里某一行中某一条数据

<template>
  <el-table :data="tableData" height="250" border style="width: 100%">
    <el-table-column prop="id" label="id" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
      <template slot-scope="scope">
        <el-button
          type="text"
          icon="el-icon-document-copy"
          v-clipboard:copy="scope.row.name"
          v-clipboard:success="onCopy"
          >复制</el-button
        >
      </template>
    </el-table-column>
    <el-table-column prop="age" label="年龄"> </el-table-column>
  </el-table>
</template>

<script>
export default {
          
   
  data() {
          
   
    return {
          
   
      tableData: [
        {
          
   
          id: 10000,
          name: "张三",
          age: 18,
        },
        {
          
   
          id: 10001,
          name: "李四",
          age: 18,
        },
        {
          
   
          id: 10002,
          name: "王五 ",
          age: 18,
        },
      ],
    };
  },
  methods: {
          
   
    onCopy() {
          
   
      this.$message.success("复制成功");
    },
  },
};
</script>