ElementPlus 自定義封裝 el-date-picker 的快捷功能示例詳解

更新時間：2024年12月30日 09:35:15 作者：博客zhu虎康

文章討論了用戶對官網(wǎng)提供的案例不滿足快捷功能需求的情況,建議在外部自定義組件中導(dǎo)入并使用快捷內(nèi)容,以滿足用戶需求,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧

需求

分析

我們看到官網(wǎng)上給出的案例如下，但是不太滿足我們用戶想要的快捷功能，因?yàn)椴惶?，因此需要我們自己封裝一些，方法如下

外部自定義該組件的快捷內(nèi)容

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

組件中導(dǎo)入并使用

<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="結(jié)束時間"
 />
</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>

到此這篇關(guān)于ElementPlus 自定義封裝 el-date-picker 的快捷功能示例詳解的文章就介紹到這了,更多相關(guān)ElementPlus 自定義封裝 el-date-picker內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: