web技术学习

Appearance

此页目录
本文总阅读量 次

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

该组件依赖element-plus。

基础用法 ​

点击查看代码
vue
<template>
  <KSelectDate
    v-model:startDate="startDate"
    v-model:endDate="endDate"
  />
</template>
<script setup lang="ts">
import { ref } from "vue"
import { KSelectDate } from "@tomiaa/vue3-components"

const startDate = ref("")
const endDate = ref("")
</script>

日期格式 ​

点击查看代码
vue
<template>
  <KSelectDate
    v-model:startDate="startDate"
    v-model:endDate="endDate"
    start-date-placeholder="开始时间"
    end-date-placeholder="结束时间"
    en-time-disabled
    value-format="YYYY-MM-DD HH:mm:ss"
    format="YYYY/MM/DD HH:mm:ss"
    type="datetime"
    :start-date-attrs="{
      clearable: true,
      size: 'large',
    }"
  />
</template>
<script setup lang="ts">
import { ref } from "vue"
import { KSelectDate } from "@tomiaa/vue3-components"

const startDate = ref("")
const endDate = ref("")
</script>

按需引入 ​

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

属性 ​

属性说明类型默认值必填
startDate/v-model:startDate省下拉框属性，el-select 的属性Date | string | numbertrue
endDate/v-model:endDate结束日期Date | string | numbertrue
startDatePlaceholder开始日期占位符string请选择开始日期false
endDatePlaceholder结束日期占位符string请选择结束日期false
enTimeDisabled未选择开始日期时是否禁用结束日期booleanfalse
valueFormat绑定时间格式stringYYYY-MM-DDfalse
format界面显示时间格式stringdate 对象false
type显示类型（el-date-picker 的 type）"year" | "month" | "date" | "dates" | "datetime" | "week" | "datetimerange" | "daterange" | "monthrange"datefalse

类型声明 ​

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

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

评论

交流群