文章统计:269字,预计阅读:小于一分钟。

vue3 组件-开始结束日期选择器

该组件依赖element-plus

基础用法

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

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"
const startTime = ref("")
const endTime = ref("")
</script>

按需引入

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

属性

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

类型声明

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

// SelectTimeProps["属性名"]
// const prop: SelectTimeProps["属性名"] = xxx
最后更新时间:
贡献者: tomiaa