更新记录
1.0.1(2023-03-23) 下载此版本
组件卸载时关闭计时器
1.0.0(2023-03-22) 下载此版本
第一版
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
- | - | - | - | - | - | - | - | - | - | - |
如何使用
引用页面template
<ttd-countdown :end_time="end_time" @overEvent = "overEvent"></ttd-countdown>
引用页面script
import ttdCountdown from '@/components/ttd-countdown/ttd-countdown.vue'
export default {
components:{
ttdProgress
},
data(){
return{
end_time:'2023-03-31T20:52:48Z',
}
},
methods:{
overEvent(){
console.log('倒计时结束')
}
}
}
参数说明
//必填
//结束日期
end_time:{
type:String,
default:''
},
//必填
//倒计时计时结束事件
overEvent:{
type:Function,
default:()=>{}
},
//选填
//日数后的表述符号(下同)
day:{
type:String,
default:'日'
},
hour:{
type:String,
default:':'
},
minute:{
type:String,
default:':'
},
second:{
type:String,
default:''
},
//选填
//日数是否显示(下同)
showDay:{
type:Boolean,
default:true
},
showhour:{
type:Boolean,
default:true
},
showMinute:{
type:Boolean,
default:true
},
showSecond:{
type:Boolean,
default:true
},
//选填
//数字颜色
timeColor:{
type:String,
default:'#FFF'
},
//选填
//数字背景颜色
bgColor:{
type:String,
default:'#007AFF'
},
//选填
//表述符号颜色
textColor:{
type:String,
default:'#000'
},
//选填
//数字的外边距
timeMargin: {
type:String,
default:'0 10rpx'
},
//选填
//字号
fontSize: {
type:String,
default:'26rpx'
}