AddressDisplay 地址显示
显示区块链地址,支持复制
功能描述
格式化显示区块链地址,支持缩略显示和一键复制。
属性规范
| 属性 | 类型 | 必需 | 默认值 | 说明 |
|---|---|---|---|---|
| address | string | Y | - | 完整地址 |
| format | enum | N | 'short' | 显示格式 |
| copyable | boolean | N | true | 是否可复制 |
| showQR | boolean | N | false | 是否显示二维码按钮 |
| onCopy | () => void | N | - | 复制成功回调 |
| onQRPress | () => void | N | - | 二维码按钮点击回调 |
format 格式
| 值 | 说明 | 示例 |
|---|---|---|
| short | 首尾缩略 | 0x1234...5678 |
| medium | 中等长度 | 0x123456...345678 |
| full | 完整显示 | 0x1234567890abcdef... |
显示规则
缩略算法
short: 前6位 + "..." + 后4位
medium: 前8位 + "..." + 后6位
full: 完整显示,必要时换行样式要求
- MUST 使用等宽字体
- SHOULD 字母小写显示(统一风格)
- MAY 支持 checksum 高亮(EVM 地址大小写混合)
行为规范
必须 (MUST)
- copyable=true 时,点击地址复制完整地址
- 复制成功后显示反馈(Toast 或图标变化)
- 使用等宽字体
建议 (SHOULD)
- 复制时提供触觉反馈
- 显示复制图标作为视觉提示
- 复制后图标短暂变为勾选状态
可选 (MAY)
- 长按显示完整地址
- 支持选择文本
布局规范
标准布局
┌─────────────────────────────────────┐
│ 0x1234...5678 [复制] [二维码] │
└─────────────────────────────────────┘行内布局
地址:0x1234...5678 📋设计标注
| 部分 | 规格 |
|---|---|
| 字体 | 等宽字体 |
| 字号 | 14px |
| 图标尺寸 | 16px |
| 图标间距 | 8px |
复制反馈
图标状态
默认: 📋 (复制图标)
点击后: ✓ (勾选图标,持续 1.5s)
恢复: 📋Toast 反馈
type: success
message: "地址已复制"
duration: 2000