cip-components/cip-form-input/basic/time-select/mobile.jsx

import { ref, computed } from 'vue'
import { Field as VantField, Popup as VanPopup, Picker as VanPicker } from 'vant'
import { useFormInput } from '../../../hooks/form-input'
import { formInputProps } from '../../form-input-props'
import { nextTime, compareTime } from './utils'
export default {
  props: formInputProps,
  setup (props, context) {
    const { emitModelValue, placeholder, width } = useFormInput(props, context)
    const start = computed(() => {
      return props.config?.start ?? '08:00'
    })
    const end = computed(() => {
      return props.config?.end ?? '20:00'
    })
    const step = computed(() => {
      return props.config?.step ?? '00:30'
    })
    // picker中的列表值
    const columns = computed(() => {
      const result = []
      if (start.value && end.value && step.value) {
        let current = start.value
        while (!compareTime(current, end.value)) {
          result.push(current)
          current = nextTime(current, step.value)
        }
      }
      return result
    })

    const show = ref(false)
    const openPopup = () => {
      show.value = true
    }
    const confirm = (val) => {
      emitModelValue(val)
      show.value = false
    }
    const cancel = () => {
      show.value = false
    }
    return () => <div style={{ width: width.value }}>
      <VantField modelValue={props.modelValue}
        placeholder={placeholder.value}
        readonly
        is-link
        onclick={openPopup}></VantField>
      <VanPopup show={show.value} position="bottom" style="height: 40%">
        <VanPicker title='选择时间'
          modelValue={props.modelValue}
          columns={columns.value}
          onConfirm={confirm}
          onCancel={cancel} />
      </VanPopup>
    </div>
  }
}