网站怎么申请官网,黄石论坛,wordpress崩溃,网站模板psd文章目录 需求分析 需求 分析
我们看到官网上给出的案例如下#xff0c;但是不太满足我们用户想要的快捷功能#xff0c;因为不太多#xff0c;因此需要我们自己封装一些#xff0c;方法如下
外部自定义该组件的快捷内容
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-modeleditForm_tree.timetypedatetimerangeshow-timevalue-formatYYYY-MM-DD HH:mm:ss:shortcutsshortcutsrange-separator到start-placeholder开始时间end-placeholder结束时间/
/template
script langts setup
import {onBeforeUnmount,onMounted,ref,watch,watchEffect,computed,reactive,
} from vue;
import { getPickerOptions } from /utils/pickerOptions.js;const shortcuts getPickerOptions();
/script
