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" />

export default {
  data() {
    return {
      day: 2,
      hour: 48,
      minute: 48 * 60 ,
      second: 48 * 60 * 60,
    };
  },
};

倒计时样式

showday 属性表示是否显示天，默认为 true, showColon 属性标识是否展示分隔符，默认为 true，false 为文字 时分秒。

<hd-count-down :second="second"  :showday="false"/>
<hd-count-down :second="second" :showColon="false"/>

export default {
  data() {
    return {
      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" />

export default {
  data() {
    return {
      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	倒计时结束时触发	-