唯杰地图 logo唯杰地图
VJMAP
EN

时间类组件(时钟 / 计时 / 日历 / 时间选择 / 时间轴)

vjvp/references/widgets/time.md 2.9 KB39 行
原文

basic-timer/timing/calendar/timeselect/timescale,时间格式用 dayjs 记号。 返回目录:index.md;全量选项字典(最权威):widget-schema.generated.json。

10. 时间类(时钟 / 计时 / 日历 / 时间选择 / 时间轴)

时间格式全部用 dayjs 记号(YYYY-MM-DD HH:mm:ss)。basic-timer/basic-timing/basic-card 共享 basic-text 同款字体组(text-font/font-shadow-*/text-position 等)。

10.1 basic-timer —— 时钟(实时时间)

  • type: basic-timer 默认尺寸: [320,60] 默认名: "时钟"(大屏顶栏标配)
  • 关键项:time-format(YYYY-MM-DD HH:mm:ss)、time-zone(local/+8/+9/+0/-5/-8)、show-weekday(显示星期);字体组同 basic-text(渐变+发光可用)。无绑定字段。

10.2 basic-timing —— 计时器(正/倒计时)

  • type: basic-timing 默认尺寸: [320,80] 默认名: "计时器"
  • 关键项:timing-mode(clockwise顺计/anticlockwise倒计);顺计 time-begin-mode(project-firing项目启动时/custom+time-begin);倒计 anticlockwise-mode(project-firing按时长+time-duration秒/custom到指定 time-end);显示格式 timing-unit(DD:HH:mm:ss)。无绑定字段。

10.3 basic-calendar —— 日历

  • type: basic-calendar 默认尺寸: [320,300] 默认名: "日历"
  • 用途:月历展示+选日期联动。自定义触发器:itemClicked(选中日期)。
  • 关键项:date-format、week-start(0 周日/1 周一);头部 calendar-header-height/calendar-header-font;单元格 week-font/cell-font/cell-today-font/cell-other-font、选中 cell-selected-bg-color/悬停 cell-hover-bg-color。
  • 绑定字段:linkage-field(string,0~1) —— 选中日期与该字段联动筛选。

10.4 basic-timeselect —— 时间选择

  • type: basic-timeselect 默认尺寸: [260,40] 默认名: "时间选择"
  • 用途:选时间点/范围 → 联动筛选。自定义触发器:itemClicked。
  • 关键项:time-type(date/datetime/time/year/month/week/daterange/datetimerange/timerange)、date-format(输出格式)、calendar-range-separator、placeholder/clearable;盒样式 input-bg-color/input-text-color/input-border-color/input-radius。
  • 绑定字段:linkage-field(string,0~1)。

10.5 basic-timescale —— 时间轴

  • type: basic-timescale 默认尺寸: [600,80] 默认名: "时间轴"
  • 用途:时间刻度轴+游标(时序进度/回放定位)。自定义触发器:timeChanged(游标变化)。
  • 关键项:游标 cursor-size/cursor-img/cursor-color/cursor-offset-y;刻度 scale-height/scale-width/scale-color/scale-line-*/scale-padding/scale-font。无绑定字段。