CopyToClipboard 复制按钮
一键复制到剪贴板组件，当用户点击并成功复制时，按钮会在 2 秒内显示成功的物理压下状态及绿色徽标反馈。
预览
变体
尺寸
安装
pnpm dlx brutx-vue@latest add copy-to-clipboard用法
<script setup>
import { CopyToClipboard } from 'brutx-ui-vue'
</script>
<template>
<CopyToClipboard text="pnpm install brutx-ui-vue" />
</template>自定义展示插槽
组件提供了默认插槽，它暴露了 copied 状态（是否刚复制成功），支持您自定义按钮的各种显示形式。
<script setup>
import { CopyToClipboard } from 'brutx-ui-vue'
</script>
<template>
<CopyToClipboard text="Custom Text">
<template #default="{ copied }">
<span>{{ copied ? '成功啦！' : '点此复制' }}</span>
</template>
</CopyToClipboard>
</template>变体
| 变体 | 说明 |
|---|---|
default | 默认背景，标准前景色文字 |
primary | Primary（珊瑚色）背景，高对比前景色 |
outline | 透明背景，仅保留描边和阴影 |
<script setup>
import { CopyToClipboard } from 'brutx-ui-vue'
</script>
<template>
<div class="flex flex-wrap items-center gap-3">
<CopyToClipboard text="default" variant="default" />
<CopyToClipboard text="primary" variant="primary" />
<CopyToClipboard text="outline" variant="outline" />
</div>
</template>尺寸
| 尺寸 | 说明 |
|---|---|
sm | 小尺寸，高度 h-9，内边距 px-3，字体 text-sm |
default | 默认尺寸，高度 h-11，内边距 px-5，字体 text-base |
lg | 大尺寸，高度 h-14，内边距 px-7，字体 text-lg |
<script setup>
import { CopyToClipboard } from 'brutx-ui-vue'
</script>
<template>
<div class="flex flex-wrap items-center gap-3">
<CopyToClipboard text="sm" size="sm" />
<CopyToClipboard text="default" size="default" />
<CopyToClipboard text="lg" size="lg" />
</div>
</template>API 参考
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
text必填 | string | — | 用户激活复制操作时写入剪贴板的文本。 |
详情声明类型string 默认值详情
来源packages/ui/src/components/copy-to-clipboard/CopyToClipboard.vue | |||
duration | number | undefined | 2000 | 成功或失败状态反馈在界面上保持的时长，单位为毫秒。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/copy-to-clipboard/CopyToClipboard.vue | |||
variant | "default" | "outline" | "primary" | undefined | "default" | 设置复制按钮的默认、主色或描边视觉样式。 |
详情声明类型NonNullable<"default" | "primary" | "outline" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/copy-to-clipboard/CopyToClipboard.vue | |||
size | "default" | "lg" | "sm" | undefined | "default" | 设置复制按钮的尺寸预设。 |
详情声明类型NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/copy-to-clipboard/CopyToClipboard.vue | |||
class | string | undefined | undefined | 追加到复制按钮容器的自定义 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/copy-to-clipboard/CopyToClipboard.vue | |||
iconSize | IconSize | undefined | "md" | 设置复制及状态图标的尺寸。 |
详情声明类型IconSize | undefined 字面量
关联类型 IconSize 类型定义 — IconSizeexport type IconSize = NonNullable<VariantProps<typeof iconSizeVariants>['size']> 默认值详情
来源packages/ui/src/components/copy-to-clipboard/CopyToClipboard.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | { copied: boolean; failed: boolean; } | 自定义复制按钮内容；作用域提供 copied 成功状态和 failed 最近一次复制失败状态。 |
详情声明类型{ copied: boolean; failed: boolean; }来源packages/ui/src/components/copy-to-clipboard/CopyToClipboard.vue | ||
复制失败反馈
组件默认文案会在复制失败时切换为「复制失败」（可通过覆盖 locale copyToClipboard.copyFailed 自定义），并进入红色破坏态；屏幕阅读器经隐藏的 role="status" live region 播报成功/失败状态。失败反馈时长与成功反馈一致，由 duration 控制；若失败反馈期间再次复制成功，界面会立即清除失败状态并切回成功反馈。
<script setup>
import { CopyToClipboard } from 'brutx-ui-vue'
</script>
<template>
<CopyToClipboard text="Custom Text">
<template #default="{ copied }">
<span>{{ copied ? '成功啦！' : '点此复制' }}</span>
</template>
</CopyToClipboard>
</template>可访问性
- 键盘操作：支持
Enter/Space触发复制操作 - ARIA 属性：按钮包含复制状态的文本描述；成功/失败状态经隐藏的
role="status"live region 播报，按钮未聚焦时也可被屏幕阅读器感知