web技术学习

Appearance

此页目录
本文总阅读量 次

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

该组件依赖element-plus。

基础用法 ​

点击查看代码
vue
<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>

时间格式 ​

点击查看代码
vue
<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>

按需引入 ​

vue
<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

类型声明 ​

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

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

评论

交流群