XTime — 时钟
多风格时钟组件，支持 数字 / 钟表 / 交通灯 三种显示模式，每秒实时刷新当前时间。
实时演示
15:56:46
2026/08/26 星期三
2026/08/26 星期三
vue
<XTime style-type="digital" />
<XTime style-type="analog" :canvas-size="160" />
<XTime style-type="traffic" />Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
styleType | 'digital' | 'analog' | 'traffic' | 'digital' | 时钟显示风格 |
canvasSize | number | 200 | 钟表模式下 Canvas 尺寸（px） |
updateInterval | number | 1000 | 更新时间间隔（ms） |
digitalColor | string | '#409eff' | 数字风格字体颜色 |
trafficColor | string | '#409eff' | 交通灯风格颜色 |
三种风格
- 数字风格：模拟复古电子钟，冒号闪烁 + 当前日期。
- 钟表风格：Canvas 手动绘制，12 刻度（3/6/9/12 加粗）、时分秒指针、红色秒针，表盘白底 + 阴影。
- 交通灯风格：七段数码管（Segment LCD）模拟老式交通灯，仅支持两位数字，冒号自动闪烁。
注意事项
updateInterval默认 1000ms，降低刷新频率可减少性能开销。- 钟表模式
canvasSize过小会导致刻度重叠，建议不低于 160px。 - 钟表配色通过 CSS 变量随主题自动适配，无需额外配置。