1、最终效果
2、TDatePicker 参数配置
1、简介：基于 ElementUI DatePicker DateTimePicker 组件的二次封装，取决于 type 值
代码示例：
<t-date-picker v-model="date" />
2、t-date-picker（Attributes）继承 DatePicker DateTimePicker 的 Attributes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 绑定值 | [String, Date, Array] | - |
| plusTime | 日期范围是否显示 00:00:00 23:59:59 时分秒 | Boolean | false |
| type | 时间类型（继承 element DatePicker DateTimePicker） | String | date |
| shortcuts | 设置快捷选项，需要传入数组对象 | Array<{ text: string, value: Date & Function }> | - |
| isPickerOptions | 是否开启自带快捷方式 | Boolean | false |
3、type 类型如下：
week 周；month 月；year 年；dates 多个日期；months 多个月；years 多个年；daterange 日期范围；monthrange 月份范围;datetime 日期和时间点;datetimerange 日期和时间点范围
4、events
| 事件名 | 说明 | 返回值 |
|---|---|---|
| change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致，可受 value-format 控制 |
Slots
| 事件名 | 说明 |
|---|---|
| default | 自定义内容 |
| range-separator | 自定义范围分割符内容 |
3、源码
<template>
<div class="t-date-picker">
<el-date-picker
:type="type"
v-model="time"
:shortcuts="state.dateOptions"
@change="dateChange"
v-bind="attrsBind"
>
<template v-for="(index, name) in slots" v-slot:[name]="data">
<slot :name="name" v-bind="data"></slot>
</template>
</el-date-picker>
</div>
</template>
<script lang="ts">
export default {
name: 'TDatePicker',
}
</script>
<script setup lang="ts">
import { computed, useAttrs, useSlots, watch, reactive } from 'vue'
const props = defineProps({
value: {
type: [String, Date, Array],
},
// 日期范围是否显示00:00:00 23:59:59时分秒
plusTime: {
type: Boolean,
default: false,
},
// 时间类型
/***
* week周；month月；year年；dates多个日期；months多个月；years多个年；daterange日期范围；monthrange月份范围
* datetime日期和时间点;datetimerange日期和时间点范围
*/
type: {
type: String,
default: 'date',
},
// 快捷配置
shortcuts: {
type: Array,
},
// 是否开启快捷方式
isPickerOptions: {
type: Boolean,
default: false,
},
})
// 抛出事件
const emits = defineEmits(['update:modelValue', 'change'])
const $attrs: any = useAttrs()
const slots = useSlots()
// vue3 v-model简写
let time: any = computed({
get() {
return props.value
},
set(val) {
// console.log(777, val)
emits('update:modelValue', val)
},
})
const attrsBind = computed(() => {
const { type } = props
let attrs = {}
switch (type) {
case 'date':
case 'dates':
attrs['value-format'] = 'YYYY-MM-DD'
attrs['placeholder'] = '请选择日期'
break
case 'week':
// attrs['value-format'] = 'YYYY - ww'
attrs['format'] = 'YYYY 第 ww 周'
attrs['placeholder'] = '请选择周'
break
case 'month':
case 'months':
attrs['value-format'] = 'YYYY-MM'
attrs['format'] = 'YYYY-MM'
attrs['placeholder'] = '请选择月'
break
case 'year':
case 'years':
attrs['value-format'] = 'YYYY'
attrs['format'] = 'YYYY'
attrs['placeholder'] = '请选择年'
break
/**
* 日期范围
*/
case 'daterange':
attrs['value-format'] = 'YYYY-MM-DD'
attrs['range-separator'] = '~'
attrs['start-placeholder'] = '请选择开始日期'
attrs['end-placeholder'] = '请选择结束日期'
break
case 'monthrange':
attrs['value-format'] = 'YYYY-MM'
attrs['range-separator'] = '~'
attrs['start-placeholder'] = '请选择开始月份'
attrs['end-placeholder'] = '请选择结束月份'
break
/**
* 日期和时间点
*/
case 'datetime':
attrs['format'] = 'YYYY-MM-DD HH:mm:ss'
attrs['value-format'] = 'YYYY-MM-DD HH:mm:ss'
attrs['placeholder'] = '请选择日期时间'
break
case 'datetimerange':
attrs['format'] = 'YYYY-MM-DD HH:mm:ss'
attrs['value-format'] = 'YYYY-MM-DD HH:mm:ss'
attrs['range-separator'] = '~'
attrs['start-placeholder'] = '请选择开始日期'
attrs['end-placeholder'] = '请选择结束日期'
break
}
return {
...attrs,
...$attrs,
}
})
const state = reactive({
dateOptions: props.shortcuts,
})
// 获取快捷配置
const getShortcuts = (type: any) => {
let shortcuts: any = []
switch (type) {
case 'date':
shortcuts = [
{
text: '今天',
value: new Date(),
},
{
text: '昨天',
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24)
return date
},
},
{
text: '一周前',
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
return date
},
},
]
break
case 'daterange':
shortcuts = [
{
text: '最近一周',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
return [start, end]
},
},
{
text: '最近一个月',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start, end]
},
},
{
text: '最近三个月',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
return [start, end]
},
},
]
break
case 'monthrange':
shortcuts = [
{
text: '本月',
value: [new Date(), new Date()],
},
{
text: '今年至今',
value: () => {
const end = new Date()
const start = new Date(new Date().getFullYear(), 0)
return [start, end]
},
},
{
text: '最近六个月',
value: () => {
const end = new Date()
const start = new Date()
start.setMonth(start.getMonth() - 6)
return [start, end]
},
},
]
break
case 'datetime':
shortcuts = [
{
text: '今天',
value: new Date(),
},
{
text: '昨天',
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24)
return date
},
},
{
text: '一周前',
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
return date
},
},
]
break
case 'datetimerange':
shortcuts = [
{
text: '最近一周',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
return [start, end]
},
},
{
text: '最近一个月',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start, end]
},
},
{
text: '最近三个月',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
return [start, end]
},
},
]
break
}
return shortcuts
}
const dateChange = (val: any[]) => {
const { type } = props
if (type === 'daterange' && val) {
let startTime = val[0]
let endTime = val[1]
if (props.plusTime) {
startTime = startTime + ' 00:00:00'
endTime = endTime + ' 23:59:59'
}
time.value = [startTime, endTime]
emits('change', [startTime, endTime])
} else {
emits('change', val)
}
}
if (props.isPickerOptions) {
state.dateOptions = getShortcuts(props.type)
}
watch(
() => props.value,
(val) => {
// console.log(111, val)
time.value = val
},
{ deep: true }
)
watch(
() => props.shortcuts,
(val) => {
if (props.isPickerOptions) {
let shortcuts = getShortcuts(props.type)
state.dateOptions = shortcuts
} else {
state.dateOptions = val
}
},
{ deep: true }
)
// 暴露方法出去
defineExpose({ state })
</script>
4、组件地址
gitHub组件地址
gitee码云组件地址
5、相关文章
基于ElementUi&AntdUi再次封装基础组件文档
vue3+ts基于Element-plus再次封装基础组件文档
