useClipboard
复制按钮的状态。copy 返回是否成功、从不抛错,成功后 copied 亮一会儿再自动熄灭,给按钮换
「已复制」文案或图标用。不需要状态(比如复制完弹一条提示条)时直接用 copyText。
基础
复制并显示已复制
选项
| 选项 | 类型 | 说明 |
|---|---|---|
resetMs | number | 「已复制」状态保持多久,缺省 2000 毫秒 |
返回值
| 名称 | 类型 | 说明 |
|---|---|---|
copy | (text: string) => Promise<boolean> | 写入剪贴板,返回是否成功 |
copied | Readonly<Ref<boolean>> | 刚复制成功为真,resetMs 后自动复位 |
copyText
copyText(text): Promise<boolean> 是不带状态的那一半,组件外也能用:
ts
import { copyText, toast } from '@xwink/ui'
if (await copyText(url)) toast.success('链接已复制')
else toast.warning(`复制失败,请手动复制:${url}`)
判据
- 两条路径:安全上下文里先用 Clipboard API;没有它(内网 http 下
navigator.clipboard是undefined)或被拒(权限、文档没聚焦)时退到离屏textarea加execCommand('copy')。 - 不抛错:两条都失败返回
false。失败怎么提示交给调用方:提示条、行内文字,或者把内容摊出来 让人手动选——复制失败时最有用的是让用户还能拿到内容。 - 组件卸载时清掉复位计时器。