cip-components/cip-form-input/basic/time-select/index.vue

<template>
  <time-select class="cip-form-picker"
              :model-value="modelValue"
              @update:modelValue="emitInput"
              :disabled="disabled"
              :placeholder="placeholder"
              :style="{width}"
              :start="start"
              :end="end"
              :step="step"
              v-bind="attrs"></time-select>
</template>
<script>
import TimeSelect from '@cip/components/cip-time-select'
import { useFormInput } from '@cip/components/hooks/form-input'
import { formInputProps } from '../../form-input-props'
import { computed } from 'vue'
export default {
  components: { TimeSelect },
  props: formInputProps,
  emits: ['update:modelValue'],
  setup (props, context) {
    const formInput = useFormInput(props, context)

    const attrs = computed(() => {
      return props.config?.attrs ?? {}
    })
    const placeholder = computed(() => {
      return props.config?.placeholder ?? ''
    })
    const width = computed(() => {
      return props.config?.width ?? ''
    })
    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'
    })

    return {
      ...formInput,
      attrs,
      start,
      end,
      step,
      placeholder,
      width
    }
  }
}
</script>

<style lang="less" scoped>
.cip-form-picker{
  width: 100%;
}
</style>