先看效果:
需求:uniapp官方只提供了时-分,想要在原有样式上实现时-分-秒
实现:
<picker mode="multiSelector" @change="consTimeChange" :range="timeRangeArray" :value="expectConsTime.split(':')">
<text>{{ expectConsTime || '请选择期望会诊时间' }}</text>
</picker>
组件mode改为multiSelector多列,range为自己创建范围数据 timeRangeArray
// format.js
// 获取时间(时分秒)选择器数组
export function getTimeArray() {
let timeArr = []
timeArr.push(getLoopArray(0,23))
timeArr.push(getLoopArray(0,59))
timeArr.push(getLoopArray(0,59))
return timeArr;
function getLoopArray(startNum, endNum) {
let array = [];
for (let i = startNum; i <= endNum; i++) {
i < 10 ? array.push('0' + i) : array.push('' + i);
}
return array;
}
}
// vue文件
// 获取好时间数据
this.timeRangeArray = getTimeArray();
Change事件,让功能完善(有一点很奇怪,传入的timeRangeArray里的值都是字符串,可是查看e.target.value却是数字类型,这里做了转换)
consTimeChange(e){
let timeArr = e.detail.value;
this.expectConsTime = (timeArr[0] < 10 ? '0' + timeArr[0] : '' + timeArr[0]) + ':' +
(timeArr[1] < 10 ? '0' + timeArr[1] : '' + timeArr[1]) + ':' +
(timeArr[2] < 10 ? '0' + timeArr[2] : '' + timeArr[2])
//格式:HH:mm:ss 字符串
}
此时功能已经完成,若想要初始时为当前的时间,可根据当前的时间戳转换为HH:mm:ss格式,给picker组件的value传入 expectConsTime.split(':') 对应的数组,即可初始化时间