Vue3实现clipboard复制的使用示例
作者：三劫散仙
在日常开发中,为用户提供复制文本功能的需求比较常见,下面介绍一款vue3可用的插件,可以快速实现这个功能,感兴趣的可以了解一下
一个很小的交互功能，网上搜了一下有一个 vue3-clipboard 直接支持vue3，到github仓库看了下，原作者已经不维护这个项目了：
推荐使用 vueuse 自带的 useclipboard 功能，由 vue 团队维护，稳定性基本没问题
官网的例子如下：
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)
}
})
] )
},
}到此这篇关于Vue3实现clipboard复制的使用示例的文章就介绍到这了,更多相关Vue3 clipboard复制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！