vue 一键复制粘贴

一、使用插件   v-clipboard

1.安装依赖

npm install --save v-clipboard

2.引入   main.js

import Vue from 'vue'
import Clipboard from 'v-clipboard'
Vue.use(Clipboard)

3.使用  index.vue

<template>
    <button v-clipboard="value"
        v-clipboard:success="Success" 
        v-clipboard:error="Error">  
   </button> 
</template>
 
 
export default {
   data() {
      return {
         value:'一键复制'
      }
   },
   methods: {
      // 成功回调
      Success ({ value, event }){
         console.log('success', value);
         this.$message.success("已复制");
      },
      // 失败回调
      Error ({ value, event }) {
         console.log('error', value)
         this.$message.error("复制失败");
      }
    }
  }

二、js实现复制功能

1.  script

 <template>
    <div>
       <el-table :data="tableList">
          <el-table-column fixed prop="name" label="名称" >
              <template #default="scope">
               <el-button type="text" @click="copyInput(scope.row.name)" />
               <el-button type="text" @click="copyName" />
            </template>
          </el-table-column>
       </el-table>
    </div>
 </template>  

 <script>
 data() {
    return {
      tableList: [{name:'花花'}],
    };
  },
   methods: {
     copyInput(data) {
      // 创建一个新的 div 元素
      let input = document.createElement("input");
      input.value = data;
      // 添加文本节点 到这个新的 div 元素
      document.body.appendChild(input);
      // 选择对象
      input.select(); 
      // 执行浏览器复制命令
      document.execCommand("Copy");
      // 复制成功
      $message({
        message: "已复制：" + data,
        type: "success",
      });
      // 删除文本节点 从这个新的 div 元素
      document.body.removeChild(input);
    },

    // 复制姓名
     copyName() {
      setTimeout(() => {
        this.copyInput(this.tableList[0].name);
      }, 100);
    },
  }

 </script>