ElementPlus 自定义封装 el-date-picker 的快捷功能示例详解
作者：博客zhu虎康
文章讨论了用户对官网提供的案例不满足快捷功能需求的情况,建议在外部自定义组件中导入并使用快捷内容,以满足用户需求,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
需求
分析
我们看到官网上给出的案例如下，但是不太满足我们用户想要的快捷功能，因为不太多，因此需要我们自己封装一些，方法如下
外部自定义该组件的快捷内容
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-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>到此这篇关于ElementPlus 自定义封装 el-date-picker 的快捷功能示例详解的文章就介绍到这了,更多相关ElementPlus 自定义封装 el-date-picker内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！