ElementPlus 自定义封装 el-date-picker 的快捷功能

文章目录

- 需求
- 分析

需求

在这里插入图片描述

分析

我们看到官网上给出的案例如下，但是不太满足我们用户想要的快捷功能，因为不太多，因此需要我们自己封装一些，方法如下
在这里插入图片描述

外部自定义该组件的快捷内容

export const getPickerOptions = () => {const shortcuts = [{text: '过去1小时',value: () => {const end = new Date()const start = new Date()start.setTime(start.getTime() - 3600 * 1000 * 1);return [start, end]},},{text: '过去4小时',value: () => {const end = new Date()const start = new Date()start.setTime(start.getTime() - 3600 * 1000 * 4);return [start, end]},},{text: '过去12小时',value: () => {const end = new Date()const start = new Date()start.setTime(start.getTime() - 3600 * 1000 * 12);return [start, end]},},{text: '昨天到今天',value: () => {const end = new Date()const start = new Date()start.setTime(start.getTime() - 3600 * 1000 * 24);return [start, end]},},{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]},},{text: '过去半年',value: () => {const end = new Date()const start = new Date()start.setTime(start.getTime() - 3600 * 1000 * 24 * 183);return [start, end]},},{text: '过去3年',value: () => {const end = new Date()const start = new Date()start.setTime(start.getTime() - 3600 * 1000 * 24 * 365 * 3);return [start, end]},},]return shortcuts
};

组件中导入并使用

<template>
<el-date-pickerv-model="editForm_tree.time"type="datetimerange"show-timevalue-format="YYYY-MM-DD HH:mm:ss":shortcuts="shortcuts"range-separator="到"start-placeholder="开始时间"end-placeholder="结束时间"/>
</template>
<script lang="ts" setup>
import {onBeforeUnmount,onMounted,ref,watch,watchEffect,computed,reactive,
} from 'vue';
import { getPickerOptions } from '@/utils/pickerOptions.js';const shortcuts = getPickerOptions();
</script>