安装相关依赖
npm i dayjs -S
npm i element-plus -S
封装 hooks
import { ElMessage } from 'element-plus'
type MessageType = "success" | "info" | "warning" | "error"
export default (type: MessageType = 'success', message = '提示信息', duration = 3000) => {
ElMessage({
type,
message,
duration,
})
}
时间工具封装
import useMessage from '@/hooks/useMessage'
import dayjs from 'dayjs'
import quarterOfYear from 'dayjs/plugin/quarterOfYear'
dayjs.extend(quarterOfYear)
type day_js = dayjs.Dayjs
type date = string | number | day_js | Date | null | undefined
type unit = dayjs.ManipulateType | undefined
export const format = (
date?: date,
template: string = 'YYYY-MM-DD HH:mm:ss'
): string => {
return dayjs(date).format(template)
}
export const add = (value: number, unit?: unit): day_js => {
return dayjs().add(value, unit)
}
export const subtract = (value: number, unit?: unit): day_js => {
return dayjs().subtract(value, unit)
}
export const isValid = (date?: date): boolean => {
return dayjs(date).isValid()
}
export const isBefore = (curTime: date, targetTime: date): boolean => {
return dayjs(curTime).isBefore(targetTime)
}
export const isSame = (
curTime: date,
targetTime: date,
unit?: unit
): boolean => {
return dayjs(curTime).isSame(targetTime, unit)
}
export const isAfter = (curTime: date, targetTime: date): boolean => {
return dayjs(curTime).isAfter(targetTime)
}
export const isDuring = (
curTime: date,
timeArr: [startTime: date, endTime: date]
): boolean => {
const c = dayjs(curTime)
const s = dayjs(timeArr[0])
const e = dayjs(timeArr[1])
if (isAfter(s, e)) {
useMessage('error', '时间范围错误')
return false
}
if (isAfter(c, s) && isBefore(c, e)) {
return true
}
return false
}