更新记录
1.0.2(2022-07-28) 下载此版本
新增 @GetTime|时间变化触发 事件
1.0.1(2022-07-28) 下载此版本
新增 @GetTime|时间变化触发 事件
1.0.0(2022-07-28) 下载此版本
1.0.0
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.5.0 app-vue app-nvue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
√ | √ | √ | √ |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
CountDown 倒计时
组件名:wly-countdown 代码块:
uCountDown
倒计时组件。
安装方式
本组件符合easycom规范,HBuilderX 2.5.5
起,只需将本组件导入项目,在页面template
中即可直接使用,无需在页面中import
和注册components
。
基本用法
在 template
中使用组件
<!-- 一般用法 -->
<wly-countdown :day="1" :hour="1" :minute="12" :second="40"></wly-countdown>
<!-- 不显示天数 -->
<wly-countdown :show-day="false" :hour="12" :minute="12" :second="12"></wly-countdown>
<!-- 修改颜色 -->
<wly-countdown color="#FFFFFF" background-color="#00B26A" border-color="#00B26A" :day="1" :hour="2" :minute="30" :second="0"></wly-countdown>
<!-- 插槽模式 -->
<wly-countdown :day="1" :hour="1" :minute="12" :second="40" showType="slot">
<template v-slot="{day, hour, minute, second}">
<text>{{day}}天</text>
<text class="time" v-if="day||hour||minute||second">{{hour}}:{{minute}}:{{second}}</text>
</template>
</wly-countdown>
<!-- emit 事件模式 -->
<wly-countdown :day="1" :hour="1" :minute="12" :second="40" @GetTime="GetTime"></wly-countdown>
API
Countdown Props
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
backgroundColor | String | #FFFFFF | 背景色 |
color | String | #000000 | 文字颜色 |
splitorColor | String | #000000 | 分割符号颜色 |
day | Number | 0 | 天数 |
hour | Number | 0 | 小时 |
minute | Number | 0 | 分钟 |
second | Number | 0 | 秒 |
showDay | Boolean | true | 是否显示天数 |
showColon | Boolean | true | 是否以冒号为分隔符 |
start | Boolean | true | 是否初始化组件后就开始倒计时 |
showType | String | true | 展示类型 default 默认, slot 插槽,emit 函数返回 |
Countdown Events
事件称名 | 说明 | 返回值 |
---|---|---|
@timeup | 倒计时时间到触发事件 | - |
@GetTime | 时间变化触发 | {} |