更新记录
1.0.10(2022-10-31) 下载此版本
修复了APP的bug
1.0.9(2022-10-28) 下载此版本
修复了微信小程序无法从12点倒计时bug,增加文字动态提示功能
1.0.8(2022-10-27) 下载此版本
修复了倒计时的位置,从12点开始倒计时
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.6.2 app-vue | × | √ | × | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | × | √ | √ | √ |
smh-countDown
用于倒计时展示的动画 。QQ:577094253
安装方式
本组件符合easycom规范,HBuilderX 2.5.5
起,只需将本组件导入项目,在页面template
中即可直接使用,无需在页面中import
和注册components
。
基本用法
在 template
中使用组件
注意:插件内部只监听了second的变化,可以动态改变。
其他属性均是有关canvas的画图属性,不可动态改变,只能在初始化的时候使用固定值。
<smh-countDown ref="countDown" :second="15" :radius="150" :fontSize="40" color="#0A84FF" bgcolor="#f2f2f2" :lineWidth="10" @end="end"></smh-countDown>
methods: {
end(){
console.log('结束事件')
//重新执行
this.$refs.countDown.refresh()
},
pause(){
//暂停
this.$refs.countDown.pause()
},
play(){
//继续
this.$refs.countDown.play()
}
}
API
smh-countDown Props
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
second | Number | 10 | 倒计时时间(可动态改变) |
radius | Number | 100 | 圆形半径(rpx) |
fontSize | Number | 30 | 中间文字的字体大小(rpx) |
color | String | #0A84FF | 线条倒计时颜色 |
bgcolor | String | #f2f2f2 | 线条背景色 |
lineWidth | Number | 5 | 线条宽度(rpx) |
smh-countDown Events
事件名 | 说明 | 返回值 |
---|---|---|
@end | 倒计时结束事件 | - |
@refresh | 重新执行倒计时 | - |
@pause | 暂停倒计时 | - |
@play | 恢复倒计时 | - |