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

需求

分析

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

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

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
};

2. 组件中导入并使用

<template>
<el-date-picker
   v-model="editForm_tree.time"
   type="datetimerange"
   show-time
   value-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>