当前位置：首页 > news >正文

企业的网站特点发帖百度秒收录网站分享

news 2025/7/7 7:02:42

企业的网站特点,发帖百度秒收录网站分享,网站开发常用jquery插件,wordpress连数据库很慢文章目录需求分析需求分析我们看到官网上给出的案例如下，但是不太满足我们用户想要的快捷功能，因为不太多，因此需要我们自己封装一些，方法如下外部自定义该组件的快捷内容 export const getPickerOptions () > {cons…

文章目录

- 需求
- 分析

需求

在这里插入图片描述

分析

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

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

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>