CountDown 倒计时

一个倒计时功能组件，用于实时展示倒计时数值。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

示例

基础用法

value 绑定倒计时时间（秒为单位）

@stop 事件监听组件倒计时停止，通过判断value是否为0即可判断倒计时结束

<pi-count-down value="314159" />

停止倒计时

autoplay 属性可以控制倒计时的启停。

<pi-count-down value="314159" :autoplay="false" />

不同精度

可以使用三个属性控制倒计时显示的精度，分别是：

显示天： show-day

显示小时： show-hour

显示分钟： show-minute

<view>
  不显示天：
  <pi-count-down value="314159" :show-day="false" />
</view>
<view class="pi-mg-tb-24">
  不显示小时：
  <pi-count-down value="314159" :show-day="false" :show-hour="false" />
</view>
<view>
  不显示分钟：
  <pi-count-down
    value="314159"
    :show-day="false"
    :show-hour="false"
    :show-minute="false"
  />
</view>

分隔符

separator 属性设置支持两种分隔符：

1、zh ：中文分隔符，显示'天','时','分','秒'。

2、colon ：英文冒号。

<view>
  分隔符(colon-冒号)：
  <pi-count-down value="314159" separator="colon" />
</view>
<view class="pi-mg-tb-24">
  分隔符(zh-中文)：
  <pi-count-down value="314159" separator="zh" />
</view>

自定义样式

timeStyle 属性更改每个时间项的样式； separatorStyle 更改分隔符的样式。更改文字样式、边框样式等，使倒计时组件更符合UI风格。

<view class="pi-pd-24">
  <view>
    时间项：
    <pi-count-down
      value="314159"
      :time-style="{
        color: '#CA332C',
        background: '#FFE7E8',
        border: '1px solid #CA332C'
      }"
      :separator-style="{
        color: '#CA332C'
      }"
    />
  </view>
  <view class="pi-mg-tb-24">
    分隔符：
    <pi-count-down
      value="314159"
      separator="zh"
      :separator-style="{
        color: '#CA332C'
      }"
    />
  </view>
</view>

API

CountDown Props

名称	描述	类型	必选	默认值
value	初始值，接收一个时间戳	—	false	-
customStyle	自定义样式，对象形式	Object	false	-
customClass	自定义样式类，字符串形式	String	false	-
timeStyle	每一个项时间的自定义样式	Object	false	-
separatorStyle	每一个项分隔符的自定义样式	Object	false	-
autoplay	-	Boolean	false	-
separator	分隔符，	'colon'-英文冒号 'zh'-中文	false	-
showDay	是否显示天	Boolean	false	-
showHour	是否显示小时	Boolean	false	-
showMinute	是否显示分钟	Boolean	false	-
showSecond	是否显示秒	Boolean	false	-

CountDown Events

事件名	描述	参数
stop	倒计时停止	-