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

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

    const attrs = computed(() => {
      return securityConfig.value.attrs ?? {}
    })
    const placeholder = computed(() => {
      return securityConfig.value.placeholder ?? ''
    })
    const width = computed(() => {
      return securityConfig.value.width ?? ''
    })
    const start = computed(() => {
      return securityConfig.value.start ?? '00:00'
    })
    const end = computed(() => {
      return securityConfig.value.end ?? '24:00'
    })
    const step = computed(() => {
      return securityConfig.value.step ?? '00:30'
    })

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

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