35 lines
948 B
Markdown
35 lines
948 B
Markdown
# HorizontalProgressBar.vue
|
||
|
||
**路径**：`src/components/HorizontalProgressBar.vue`
|
||
|
||
## 功能用途
|
||
|
||
横向进度条，用于订单簿深度展示等场景。根据 `value`/`max` 计算百分比宽度，支持自定义轨道与填充样式。
|
||
|
||
## Props
|
||
|
||
| 属性 | 类型 | 默认值 | 说明 |
|
||
|------|------|--------|------|
|
||
| max | number | 100 | 最大值 |
|
||
| value | number | 0 | 当前值 |
|
||
| className | string | '' | 自定义类名 |
|
||
| trackStyle | object | {} | 轨道样式 |
|
||
| fillStyle | object | {} | 填充样式 |
|
||
|
||
## 使用方式
|
||
|
||
```vue
|
||
<HorizontalProgressBar
|
||
:max="maxAsksTotal"
|
||
:value="ask.total"
|
||
:fill-style="{ backgroundColor: '#e89595' }"
|
||
:track-style="{ backgroundColor: 'transparent' }"
|
||
/>
|
||
```
|
||
|
||
## 扩展方式
|
||
|
||
1. **动画**：增加 `transition` 或 `animation` 配置
|
||
2. **渐变**：`fillStyle` 支持 `background: linear-gradient(...)`
|
||
3. **垂直模式**：增加 `vertical` prop，切换为纵向进度条
|