原文请关注vx公众号：酒粮人僧快码
原文地址：https://mp.weixin.qq.com/s/LcJj08RJgMEC_cLYMzn-3Q

运行系统：windows 10

运行终端：Goodle Chrome(谷歌) 浏览器

开发框架：vue3 + elementPlus

开发环境：nodeJS v20.17.0

nvm 版本：1.1.12

功能特点总结,灵活的日期计算：

支持任意基准日期

可配置获取的月份数量

可选择是否包含当前月

useDateRange.js






功能特点总结
灵活的日期计算：

支持任意基准日期

可配置获取的月份数量

可选择是否包含当前月

多种日期格式：

内置6种常用日期格式

支持动态添加/移除格式

可同时返回多种格式数据

响应式设计：

所有配置变更自动更新计算结果

完美融入Vue响应式系统

计算属性自动依赖追踪

健壮性处理：

自动处理无效日期输入

提供合理的默认值

格式去重避免重复计算

易于集成：

清晰的API设计

详细的类型提示

灵活的配置选项

这个Hook非常适合需要处理月份范围数据的场景，如报表系统、日历组件、数据分析看板等，可以大大简化日期处理的复杂度。

使用示例详解
基础使用示例

解释：

从@/hooks/usePreviousMonths导入hook函数

调用hook并解构返回的对象

dateRange是一个计算属性，会根据当前配置自动计算日期范围

默认返回full格式(YYYY-MM-DD)的日期数组

代码解释：

通过配置对象自定义hook行为

baseDate指定计算的基准日期

monthsBefore设置要获取的月份数量

includeCurrent控制是否包含当前月

formats指定需要返回的日期格式

代码解释：

updateBaseDate动态修改基准日期

updateMonthsBefore调整要获取的月份数量

toggleFormat动态添加新的日期格式

所有变更都会自动反映在dateRange计算属性中

代码解释：

在Vue组件的setup函数中使用hook

将基准日期设置为响应式变量以便动态更新

使用watch监听基准日期变化并自动更新hook

提供格式切换函数控制显示的日期格式

暴露必要的数据和方法给模板使用

原文请关注vx公众号：酒粮人僧快码
原文地址：https://mp.weixin.qq.com/s/LcJj08RJgMEC_cLYMzn-3Q