Vue3实现clipboard复制功能

一个很小的交互功能，网上搜了一下有一个 vue3-clipboard 直接支持vue3，到github仓库看了下，原作者已经不维护这个项目了：

推荐使用 vueuse 自带的 useclipboard 功能，由 vue 团队维护，稳定性基本没问题

官网链接：useClipboard | VueUse

官网的例子如下：

import { useClipboard } from '@vueuse/core' const source = ref('Hello') const { text, copy, copied, isSupported } = useClipboard({ source }) <div v-if="isSupported"> <button @click='copy(source)'> <!-- by default, `copied` will be reset in 1.5s --> <span v-if='!copied'>Copy</span> <span v-else>Copied!</span> </button> <p> Current copied: <code>{{ text || 'none' }}</code> </p> </div> <p v-else> Your browser does not support Clipboard API </p>

上面的例子并不具备通用性，我们实际应用肯定需要再次封装，下面给出我封装的效果，在 Table 的每一行中，有一个name提供快捷拷贝展示效果如下：

这样用图标代替复制的按钮样式会更加美观一点

在ts工具类中封装的通用拷贝方法，只需要传入要复制的参数即可：

import {Component, h} from "vue"; import Icon from '@ant-design/icons-vue'; import { useClipboard } from '@vueuse/core' import { message } from 'ant-design-vue'; const { copy, isSupported } = useClipboard(); export function renderDesignIcon (icon: Component, conf:any=null) { return h(Icon,conf, { component: () => h(icon,) }) } export function handleCopy (text:string) { if (!isSupported) { message.error("您的浏览器不支持Clipboard API"); return; } copy(text); message.success(`复制成功：${text}`); }

然后在使用的时候，只需要在 CopyOutlined 图标的点击事件上，调用这个方法即可：

在 vue 模版中调用 CopyOutlined @click="handleCopy(text)" style="color: gray;"> </CopyOutlined>

在render函数中调用：

{ title: "应用名", dataIndex: "applicationName", width: '180px', customRender: ({text, record, index, column}) => { return h('div',{}, [ `${record.applicationName} `, renderDesignIcon(CopyOutlined, { style: { color: 'gray' }, onClick: () => { handleCopy(record.applicationName) } }) ] ) }, }