mint-ui中时间控件选择处理

184 阅读1分钟

实现功能:选择结束时间大于开始时间。

根据mintUi文档中提供的文档,下列代码实现的相对于我要实现的功能有些偏差,且mintUI文档稍微空白,我稍微做了下改进,用以实现我们的功能。

文档:
    onValuesChange(picker, values) {
          if (values[0] > values[1]) {
            picker.setSlotValue(1, values[0]);
          }
        }

下面直接贴代码:

<mt-picker :slots="selectData" @change="onValuesChange" class="popupType" :showToolbar="true" ref="picker" v-if="currentIndex == 1" :class="currentIndex > 1 ? 'choosePopup' : ''"></mt-picker>

data部分:
slots: [  {    flex: 1,    values: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'],    className: 'slot1',    textAlign: 'right'  },  {    flex: 1,    values: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'],    className: 'slot3',    textAlign: 'left'  }],

methods部分:
    onValuesChange (ref, value) {  const {currentIndex} = this;  if (currentIndex === 0) {    const startTime = value[0].split(':')[0]    const endTime = value[1].split(':')[0]    if (startTime * 1 >= endTime * 1) {      ref.setSlotValue(1, `${startTime * 1 + 1}:00`);    }    this.timeValue = value; //输入框取值  } else {    this.valueStore = value[0];  }},

传不了视频,只能图片,自行脑补一下。。。