| commit | author | age | ||
| 9bcb19 | 1 | # NumberInfo 数据文本 |
| I | 2 | |
| 3 | 常用在数据卡片中，用于突出展示某个业务数据。 | |
| 4 | ||
| 5 | ||
| 6 | ||
| 7 | 引用方式： | |
| 8 | ||
| 9 | ```javascript | |
| 10 | import NumberInfo from '@/components/NumberInfo' | |
| 11 | ||
| 12 | export default { | |
| 13 | components: { | |
| 14 | NumberInfo | |
| 15 | } | |
| 16 | } | |
| 17 | ``` | |
| 18 | ||
| 19 | ||
| 20 | ||
| 21 | ## 代码演示 [demo](https://pro.loacg.com/test/home) | |
| 22 | ||
| 23 | ```html | |
| 24 | <number-info | |
| 25 | :sub-title="() => { return 'Visits this week' }" | |
| 26 | :total="12321" | |
| 27 | status="up" | |
| 28 | :sub-total="17.1"></number-info> | |
| 29 | ``` | |
| 30 | ||
| 31 | ||
| 32 | ||
| 33 | ## API | |
| 34 | ||
| 35 | 参数 | 说明 | 类型 | 默认值 | |
| 36 | ----|------|-----|------ | |
| 37 | title | 标题 | ReactNode\|string | - | |
| 38 | subTitle | 子标题 | ReactNode\|string | - | |
| 39 | total | 总量 | ReactNode\|string | - | |
| 40 | subTotal | 子总量 | ReactNode\|string | - | |
| 41 | status | 增加状态 | 'up \| down' | - | |
| 42 | theme | 状态样式 | string | 'light' | |
| 43 | gap | 设置数字和描述之间的间距（像素）| number | 8 | |
