效果如下

Slider滑塊軸的默認(rèn)綁定輸出值是number 且取值范區(qū)間是【0-100】

根據(jù)需求 比如我這里是需要展示一天24小時(shí)，且只能展示半點(diǎn)和整點(diǎn)。可以把時(shí)間軸等分成48份，這里max取值上限可以設(shè)為48，步長(zhǎng)為1

重點(diǎn)是自定義的格式化處理函數(shù)

formatTooltip (val) {let hour = 0let min = 0let ms = val * 1800hour = parseInt(ms / 3600)if (hour < 10) {hour = '0' + hour.toString()} else {hour = hour.toString()}min = ms % 3600if (min === 0) {min = '00'} else {min = '30'}let time = hour + ':' + minconsole.log(time)return time}

因?yàn)閰?shù)val是刻度上的一份，代表半小時(shí)時(shí)長(zhǎng)，化成毫秒計(jì)算需乘1800。計(jì)算小時(shí)整除向下取整，計(jì)算分鐘整除求余，除盡為整點(diǎn)，除不盡為半點(diǎn)。這里注意不滿10小時(shí)要在前面補(bǔ)0。

2021/3/23補(bǔ)充
:marks寫法

總結(jié)

以上是生活随笔為你收集整理的element中滑块组件Slider展示一天24小时的时间问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。