更新记录
1.0.0(2023-06-21)
下载此版本
可选择今明后三天的时间选择
时间间隔支持手动修改
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue app-nvue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
× |
× |
× |
× |
× |
基本用法
<view @tap="showDate">显示</view>
<lh-date ref="lhDate" @confirm="newDateConfirm" title="请选择时间" :showDay="3" :isTodayFirstZero="false" :twoIndexTimeInterval="40"></lh-date>
组件参数:
showDay:显示天数 3就表示左侧有今明后三天;2代表今明两天; 1代表今天
isTodayFirstZero:今天的第一个时间的时间戳是否为0(方面某些人的需要)
twoIndexTimeInterval:今天第一个时间和第二个时间的间隔(默认30分钟)
greaterTwoIndexTimeInterval:第二个以上的时间间隔(默认是10分钟)
isCurMinutesCeil:是否将今天当前分钟数上取整,比如00:02->00:10 上取整
activeColor:选中的时间的字体颜色
title:弹窗顶部title
tips:
如果需要一开始自动使用时间则在 onLoad执行 this.$refs.lhDate.initDate(dateInfo, 'auto')
@confirm会自动返回数据
export default {
data() {
return {
// 初始数据
dateInfo: {
firstDateText: '立即送达', // 今天第一个时间用文字替代
time: 0,
leftCurIndex: 0, // 组件左边区域的索引
rightCurIndex: 0, // 组件右边区域的索引
scrollIntoView: 'index-0', // 这个是选中时间后 重新选择会自动定位到对应的时间
}
}
},
methods: {
showDate(){
this.$refs.lhDate.show(this.dateInfo)
},
newDateConfirm(dateInfo){
// 请保持this.deteInfo等于deteInfo,方便重新选的时候,传入进去自动定位到上次选择的位置,你可以拿其他变量来保存返回值
this.dateInfo = dateInfo
},
}
}