剪贴板 Hooks：useClipboard

useClipboard 统一复制出口：Clipboard API 优先、隐藏 textarea + execCommand 降级（HTTP 内网环境仍可用），copied / failed 状态自动复位（默认 1.5s），支持 source 响应式来源与 onCopy / onError 回调。与 BizCopyText（展示组件）互补，本 hook 面向任意自定义交互的编程式复制。

基本用法

<script setup lang="ts">
import { useClipboard } from 'vue3-ep-biz-lib'

const { copied, copy } = useClipboard({ copiedDuring: 2000 })

const onCopy = async (): Promise<void> => {
  await copy('SN-20261020-0001')
}
</script>

<template>
  <el-button @click="onCopy">{{ copied ? '已复制 ✓' : '复制序列号' }}</el-button>
</template>

响应式来源 + 失败处理

const { copied, failed, copy, isSupported } = useClipboard({
  source: () => detail.value.serialNo, // copy() 不带参时取此值
  onError: (error) => console.warn('复制失败', error),
})

await copy() // 复制 detail.value.serialNo

API

useClipboard(options): UseClipboardReturn

成员	类型	说明
isSupported	Ref<boolean>	是否支持原生 Clipboard API（navigator.clipboard 且安全上下文）
text	Ref<string>	最近一次复制的文本
copied	Ref<boolean>	最近一次复制是否成功（copiedDuring 后自动复位）
failed	Ref<boolean>	最近一次复制是否失败（同样自动复位）
copy	(text?: string) => Promise<boolean>	执行复制；不传参取 source；返回是否成功

options

属性	类型	默认值	说明
copiedDuring	number	1500	copied / failed 保持毫秒数
legacy	boolean	true	API 不可用或失败时回退 execCommand('copy')
source	Ref<string> | (() => string)	—	复制内容来源
onCopy	(text) => void	—	复制成功回调
onError	(error) => void	—	两种方案均失败时回调

TIP

execCommand 已被标记废弃但仍是最可靠的 HTTP 降级手段；安全上下文（HTTPS / localhost）下两方案行为一致。批量复制表格行等场景配合 BizTable 选择变化动态更新 source 即可。