组件 · 表单 · 原生 HTML 与 React
可复制的值 ClipboardText
只读的值加一个复制按钮;复制后按钮上方冒出「已复制」,图标变勾一下。
演示
pnpm xxd new ~/js/插件-今日待办
pnpm xxd new ~/js/插件-今日待办
<div class="xxd-clipboard" style="width:100%;max-width:300px">
<code>pnpm xxd new ~/js/插件-今日待办</code>
<button class="xxd-btn" data-variant="ghost" data-icon-only data-size="sm" aria-label="复制" data-copy="pnpm xxd new ~/js/插件-今日待办"><i data-xxd-icon="Copy" data-size="14"></i></button>
</div>export function ClipboardTextDemo() {
return <ClipboardText text="pnpm xxd new ~/js/插件-今日待办" />;
}属性与类名
| 属性 / 类名 | 说明 |
|---|---|
| data-size | sm |
| 类名 | xxd-clipboard |
JS
[data-copy="文本"] 或 [data-copy-target="#选择器"];data-copy-done 自定义气泡文字键盘与读屏
- 复制按钮有 aria-label;「已复制」通过 live region(role=status)读出
- 被复制的值是可选中的文字,键盘用户也能自己复制