#复制按钮

复制代码、命令或标识符，并在同一操作位置提供进行中、成功和失败反馈。

npm install @a3s-lab/ui@0.4.0

<button class="btn copy-button" data-copy-text="npm install @a3s-lab/ui@0.4.0" data-copy-success="已复制" data-copy-error="复制失败">
  <span data-copy-label>复制命令</span><span data-copy-feedback aria-live="polite"></span>
</button>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#用法

<button class="btn copy-button" data-copy-text="npm install @a3s-lab/ui@0.4.0" data-copy-success="已复制" data-copy-error="复制失败">
  <span data-copy-label>复制命令</span><span data-copy-feedback aria-live="polite"></span>
</button>

#独立控制器

import "@a3s-lab/ui/runtime";
import "@a3s-lab/ui/copy-button";

const component = document.querySelector(".copy-button");
component.getState();

控制器是幂等的；完整包可改为一次导入 @a3s-lab/ui/all。宿主通过可取消的 before-* 事件执行权限与业务校验。

#契约

#产品边界

复制按钮不应隐藏下载、分享或授权行为。敏感值必须由宿主明确提供，组件不会自行读取剪贴板或受保护数据。

组件只发布可复用的交互边界。数据获取、持久化、权限、可信内容与业务实体继续由宿主产品拥有。

#可访问性

标签在反馈期间仍保持动作含义，结果由实时区域播报。失败信息说明浏览器拒绝了复制，并允许用户重试或手动选择。