vue2和vue3一键复制功能（pc）（谨以记录）

vue2：

1.安装vue-clipboard插件：

npm install vue-clipboard2

2.在Vue项目的入口文件（通常是main.js或者main.ts）中，引入并使用vue-clipboard插件

import VueClipboard from 'vue-clipboard2';
Vue.use(VueClipboard);

3.使用

<el-button 
    class="right" 
    icon="el-icon-document-copy" 
    v-if="value"
    v-clipboard:copy="value" //要复制的内容
    v-clipboard:success="copySuccess"  //复制成功的回调
    v-clipboard:error="copyError"   //复制失败的回调
>复制</el-button>

    copySuccess(){
      this.$message({
          message: '复制成功',
          type: 'success'
        });
    },
    copyError(){
      this.$message({
          message: '复制失败',
          type: 'error'
        });
    },

vue3：

1.安装vue-clipboard插件

npm i vue-clipboard3 --save
或
yarn add i vue-clipboard3 --save

2.引入vue-clipboard插件

在需要文件中导入: 

import clipboard3 from 'vue-clipboard3'

3.使用

<template>
  <div class="hello">
    <input type="text" v-model="text">
    <button @click="copy">点击复制</button>
  </div>
</template>
<script setup>
// 引入vue-clipboard3
import clipboard3 from "vue-clipboard3";
const copy = async () => {
  const { toClipboard } = clipboard3();
  try {
    await toClipboard(data.text);
    showToast('复制成功!')
  } catch (error) {
    showToast("复制失败!")
  }
};
</script>

原文链接：https://blog.csdn.net/qq_45585640/article/details/140007134