iter(g235): 新增 copyButton 复制按钮,剪贴板写入带已复制反馈与降级(72 组件)
This commit is contained in:
+29
-1
@@ -1,6 +1,6 @@
|
||||
# @ui-arch 组件库 Agent 文档(无图形版)
|
||||
|
||||
> 自动生成于 2026-10-26T13:22:26.722Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 自动生成于 2026-10-26T13:25:25.456Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
|
||||
|
||||
## 快速上手
|
||||
@@ -2046,6 +2046,33 @@ const code = signal(''); pinInput({ value: code, length: 6, onChange: (v) => con
|
||||
|
||||
现场演示:apps/docs/demo.html#sec-pininput
|
||||
|
||||
### copyButton — 复制按钮 CopyButton
|
||||
|
||||
参数:
|
||||
|
||||
- text(必填):string | (() => string) —— 待复制内容;传函数则在点击瞬间取实时值(如输入框当前值)
|
||||
- label(默认 复制):string —— 按钮文案
|
||||
- copiedLabel(默认 已复制):string —— 复制成功后的短暂文案(2s 后还原为 label)
|
||||
- variant(默认 ghost):'primary' | 'ghost' | 'danger' —— 视觉强度,沿用按钮三档
|
||||
- size(默认 md):'sm' | 'md' | 'lg' —— 高度档位
|
||||
- disabled:boolean | Signal<boolean> —— 禁用态:布尔直接置位,传信号则动态同步
|
||||
- onCopied(回调):(text: string) => void —— 复制成功回调(参数为实际写入的内容)
|
||||
|
||||
示例:
|
||||
|
||||
```
|
||||
copyButton({ text: 'npm install @ui-arch/ui', onCopied: (t) => console.log(t) })
|
||||
```
|
||||
|
||||
手把手:
|
||||
|
||||
1. 传 text 即可用,缺省幽灵按钮、文案「复制」;复制成功后短暂换成「已复制」,2s 自动还原
|
||||
2. 内容需要实时取就传函数:text: () => textFieldValue(),点击瞬间才求值
|
||||
3. label / copiedLabel 可改文案;variant / size 透传给内部 button,视觉与普通按钮完全一致
|
||||
4. 非安全上下文(http)或旧浏览器自动降级为隐藏 textarea + execCommand,无需业务处理兼容
|
||||
|
||||
现场演示:apps/docs/demo.html#sec-copybutton
|
||||
|
||||
API 速览:
|
||||
|
||||
- button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用;type 缺省 button(表单内不隐式提交)
|
||||
@@ -2121,6 +2148,7 @@ API 速览:
|
||||
- commandPalette(props):命令面板,⌘K / Ctrl+K 唤起,输入即过滤(主文案/说明/关键词三层),↑↓ 环形选择 + 回车执行 + Esc 收起,选中与关闭都归还焦点;返回 { el, open, close } 句柄
|
||||
- timePicker(props):时间选择,时 / 分两列弹层,value 信号双向绑定 HH:mm,分钟可配步长,Esc 收起
|
||||
- pinInput(props):验证码输入,N 格单字符数字输入,输入自动进格、退格回删、方向键移格、粘贴自动分发,value 信号双向绑定,mask 可密文显示
|
||||
- copyButton(props):复制按钮,点击把 text 写入剪贴板并短暂显示已复制,text 可传函数取实时值,clipboard API 不可用时降级 execCommand
|
||||
|
||||
一行用法:
|
||||
|
||||
|
||||
Reference in New Issue
Block a user