本文介绍在 Vue3 项目中推荐使用官方维护的 VueUse 库中的 useClipboard 实现复制功能。针对官方示例通用性不足的问题，提供了基于 TypeScript 和 Ant Design Vue 的通用封装方案，涵盖工具类定义、模板调用及 Render 函数实现，帮助开发者在表格等场景中便捷添加复制交互。
这是一个轻量级的交互需求。经搜索发现，存在名为 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 字段提供的快捷复制功能的实现效果。
使用图标替代传统的复制按钮样式，视觉效果更为美观。
在 TypeScript 工具类中封装了通用的拷贝方法，只需传入待复制的文本参数即可：
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)
}
})
] )
},
}以上就是关于 Vue3 实现 clipboard 复制功能的示例介绍，更多相关 Vue3 clipboard 复制内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！