vue3 组件-开始结束时间选择器

该组件依赖element-plus。

基础用法

点击查看代码

<template>
  <KSelectTime
    v-model:startTime="startTime"
    v-model:endTime="endTime"
  />
</template>
<script setup lang="ts">
import { ref } from "vue"
import { KSelectTime } from "@tomiaa/vue3-components"

const startTime = ref("")
const endTime = ref("")
</script>

时间格式

点击查看代码

<template>
  <KSelectTime
    v-model:startTime="startTime"
    v-model:endTime="endTime"
    start-time-start="10:30"
    start-time-end="20:30"
    end-time-start="11:00"
    end-time-end="21:00"
    start-time-step="00:40"
    end-time-step="01:00"
    en-time-disabled
    :start-time-attrs="{ size: 'large' }"
    :end-time-attrs="{ size: 'small' }"
  />
</template>

<script setup lang="ts">
import { ref } from "vue"
import { KSelectTime } from "@tomiaa/vue3-components"

const startTime = ref("")
const endTime = ref("")
</script>

按需引入

<script setup lang="ts">
import { KSelectTime } from "@tomiaa/vue3-components"
</script>

属性

属性	说明	类型	默认值	必填
startTime/v-model:startTime	开始时间	string		true
endTime/v-model:endTime	结束时间	string		true
startTimeStart	开始时间能选择的最早时间	string	09:00	false
startTimeEnd	开始时间能选择的最晚时间	string	18:00	false
endTimeStart	结束时间能选择的最早时间	string	09:00	false
endTimeEnd	结束时间能选择的最晚时间	string	18:00	false
startTimeStep	开始时间间隔	string	00:30	false
endTimeStep	结束时间间隔	string	00:30	false
startTimePlaceholder	开始时间占位符	string	请选择开始时间	false
endTimePlaceholder	结束时间占位符	string	请选择结束时间	false
enTimeDisabled	未选择开始时间时是否禁用结束时间	boolean	false	false

类型声明

import type {
  SelectTimeProps, // 属性声明
} from "@tomiaa/vue3-components"

// SelectTimeProps["属性名"]
// const prop: SelectTimeProps["属性名"] = xxx