在Vue3中，可以使用clipboard插件来实现复制内容到剪贴板的功能。

一、安装插件

通过npm安装clipboard插件：

npm install clipboard --save

二、在组件中使用插件

1、data-clipboard-text   复制文本：

<script setup lang="ts">
import { message } from 'ant-design-vue'
import Clipboard from 'clipboard'

/**
 * 点击复制
 */
const copy = () => {
  const clipboard = new Clipboard('.tag-read')
  // 复制成功
  clipboard.on('success', () => {
    message.success('代码已复制到剪切板，可粘贴')
    // 释放内存
    clipboard.destroy()
  })
  // 复制失败
  clipboard.on('error', () => {
    message.error('代码复制失败')
    // 释放内存
    clipboard.destroy()
  })
}
</script>
<template>
  <div>
    <button
      class="tag-read"
      data-clipboard-text="我是被复制的代码"
      @click="copy"
    ></button>
  </div>
</template>

2、data-clipboard-target 复制指定元素里的内容：

<script setup lang="ts">
import { message } from 'ant-design-vue'
import Clipboard from 'clipboard'

/**
 * 点击复制
 */
const copy = () => {
  const clipboard = new Clipboard('.tag-read')
  // 复制成功
  clipboard.on('success', () => {
    message.success('代码已复制到剪切板，可粘贴')
    // 释放内存
    clipboard.destroy()
  })
  // 复制失败
  clipboard.on('error', () => {
    message.error('代码复制失败')
    // 释放内存
    clipboard.destroy()
  })
}
</script>
<template>
  <div>
    <div id="foo">我被data - clipboard - target复制了</div>
    <button
      class="tag-read"
      data-clipboard-target="#foo"
      @click="copy"
    ></button>
  </div>
</template>

3、复制函数返回值，这样复制的就是generateCode函数的返回值codeStr：

<script setup lang="ts">
import { message, notification } from 'ant-design-vue'
import Clipboard from 'clipboard'
import { ref } from 'vue'

const copyNode = ref<any>(null)

// 复制代码
const clipboard = new Clipboard('.copy-node', {
  /**
   * 点击按钮，直接复制text函数的返回值
   */
  text: function () {
    const codeStr = generateCode()
    return codeStr
  },
})

// 代码复制成功
clipboard.on('success', () => {
  notification.success({
    message: '成功',
    description: '代码已复制到剪切板，可粘贴',
  })
  // 释放内存
  clipboard.destroy()
})

// 代码复制失败
clipboard.on('error', () => {
  message.error('代码复制失败')
  // 释放内存
  clipboard.destroy()
})

/**
 * 点击复制
 */
const copy = () => {
  copyNode.value.click()
}

/**
 * generateCode函数
 */
const generateCode = () => {
  return [{ id: 1, name: '测试数据' }]
}
</script>
<template>
  <div>
    <button @click="copy"></button>
    <input id="copy-node" type="hidden" ref="copyNode" />
  </div>
</template>