vue3 实现copy功能 使用vue3-clipboard插件

需求

点击文字，复制文字里面的value值，如点击姓名,复制的是name这个字段。

使用vue3-clipboard插件的步骤

• 1. 安装

npm install --save vue3-clipboard

• 2. 引入 （在main.js引入）

import { VueClipboard } from '@soerenmartius/vue3-clipboard'

app.use(VueClipboard)

• 3. template

 <el-tag
    v-for="item in resumetemplate"
    :key="item.value"
    v-clipboard:copy="item.value"
    v-clipboard:success="onSuccess"
    v-clipboard:error="onError"
    >{{ item.label }}</el-tag
  >

• 4. resumetemplate json

[
  {
    "label": "姓名",
    "value": "name"
  }
]

• 5. js 方法

const onSuccess = () => {
  ElMessage.success('复制成功')
}

const onError = () => {
  ElMessage.error('复制失败')
}