#复制按钮

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

npm install @a3s-lab/ui

<button
  type="button"
  class="btn copy-button"
  data-copy-text="npm install @a3s-lab/ui"
  data-copy-success="已复制"
  data-copy-error="复制失败"
  data-copy-reset="1600"
>
  <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
    type="button"
    class="btn copy-button"
    data-copy-empty-demo="zh"
    data-copy-text=""
    data-copy-success="已复制"
    data-copy-error="复制失败"
    data-copy-reset="1600"
  >
    <span data-copy-label>复制空内容</span>
    <span data-copy-feedback aria-live="polite"></span>
  </button>

#用法

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

当 data-state="copying" / aria-busy="true" 时，重复激活会被忽略。空来源会进入 error 且不写入剪贴板。data-copy-reset 在成功反馈后回到 ready。

#独立控制器

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

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

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

#契约

#产品边界

复制不得伪装成下载、分享或授权。敏感值由宿主显式提供；组件不会自行读取剪贴板或受保护数据。

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

#无障碍

键盘 Enter/Space 激活原生按钮。反馈通过 aria-live 留在同一控件内。复制中通过 busy 状态播报且不改变控件几何；成功与失败用文字表达，而不是只靠颜色。