46 lines
1.7 KiB
Markdown
46 lines
1.7 KiB
Markdown
# 9.11 数据展示组件
|
|
|
|
:::tip 概述
|
|
展示类公共组件：CountTo（数字动画）、Qrcode（二维码）、Render（渲染器）、icon（图标）、Application/Websocket/Authority/CheckToken 等功能性组件。
|
|
:::
|
|
|
|
## 组件清单
|
|
|
|
| 组件 | 职责 |
|
|
|---|---|
|
|
| CountTo | 数字滚动动画（仪表盘统计卡片） |
|
|
| Qrcode | 二维码生成（扫码登录、分享场景） |
|
|
| Render | 函数式/配置化渲染（动态列、动态操作区） |
|
|
| icon | 图标组件（菜单图标、操作图标统一入口） |
|
|
| Websocket | WebSocket 封装（实时消息推送场景） |
|
|
| Authority | 权限包装组件（与 v-perm 等价的组件式表达） |
|
|
| CheckToken | 令牌校验组件（内嵌校验场景） |
|
|
| Lockscreen | 锁屏组件 |
|
|
| Application | 应用级注入 |
|
|
|
|
## CountTo（仪表盘常用）
|
|
|
|
```html
|
|
<!-- ui/src/views/dashboard/console/index.vue 实际用法 -->
|
|
<CountTo :startVal="1" :endVal="info.visits.dayVisits" class="text-3xl" />
|
|
<CountTo :startVal="1" suffix="%" :endVal="info.visits.rise" />
|
|
```
|
|
|
|
统计卡片标配（今日访问、涨幅等），配合 echarts 图表呈现运行数据。
|
|
|
|
## icon 的统一性
|
|
|
|
菜单图标（gin_menu.icon）与页面内图标都经 icon 组件解析——菜单管理里选的图标名与页面引用同一套图标库（@element-plus/icons + vicons）。
|
|
|
|
## Websocket
|
|
|
|
实时通知场景的封装（连接、重连、消息分发）；未接消息推送服务时组件处于待命状态，不产生副作用。
|
|
|
|
## 选型原则
|
|
|
|
展示需求先查本页与 Select/Table——公共组件没有的再考虑引入第三方，新增全局组件前先评估复用面（防 components 膨胀）。
|
|
|
|
## 相关
|
|
|
|
- [附录 H 前端组件速查](/zh/appendix/components.html)
|