uniapp picker组件实现时分秒功能 并初始化当前时间

先看效果：

需求：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(':')  对应的数组，即可初始化时间