CountDown 倒计时
用于实时展示倒计时数值,支持毫秒精度。## 代码演示
基础用法
支持day
日,hour
时,minute
分,second
秒,属性表示倒计时总时长。
<hd-count-down :day="day" />
<hd-count-down :hour="hour" />
<hd-count-down :minute="minute" />
<hd-count-down :second="second" />
const day = 2
const hour = 48
const minute = 48 * 60
const second = 48 * 60 * 60
倒计时样式
showday
属性表示是否显示天,默认为 true
, showColon
属性标识是否展示分隔符,默认为 true
,false
为文字 时分秒
。
<hd-count-down :second="second" :showday="false" />
<hd-count-down :second="second" :showColon="false" />
const second = 30 * 60 * 60
主题
backgroundColor
属性表示时间背景颜色,borderColor
属性表示边框颜色,color
属性表示字体颜色,splitorColor
属性表示分隔符颜色,支持 HEX,RGB 和常用颜色字符串。
<hd-count-down :second="second" backgroundColor="#000000" borderColor="rgb(0,0,0)" color="black" backgroundColor="red" />
const second = 30 * 60 * 60
Props
Name | Description | Type | Required | Default |
---|---|---|---|---|
showDay | 控制展示天 | Boolean | false | 默认值是:true |
showColon | 是否展示分隔符 | Boolean | false | 默认值是:true |
backgroundColor | 背景色 | String | false | 默认值是:#FFFFFF |
borderColor | 边框颜色 | String | false | 默认值是:#000000 |
color | 字体颜色 | String | false | 默认值是:#000000 |
splitorColor | 分隔符颜色 | String | false | 默认值是:#FFFFFF |
day | 日 | Number | false | 默认值是:0 |
hour | 时 | Number | false | 默认值是:0 |
minute | 分 | Number | false | 默认值是:0 |
second | 秒 | 默认值是:0 | false | 0 |
Events
Event Name | Description | Parameters |
---|---|---|
timeup | 倒计时结束时触发 | - |