请基于 Vue3 + Vite + script setup 开发一个全屏无限滚动日历组件,允许安装依赖(dayjs、@vueuse/core 等)。
核心需求(必须严格实现):
- 顶部区域永久固定在视口最顶部,不随滚动移动。 顶部区域包含两部分:
- 左侧:实时显示当前可视区域内占比最大的年月。
- 右侧:返回今日按钮 + 指定年月跳转选择器。
- 日历的【星期栏】和【年月标题】一起固定在顶部,永远不滚动。
- 只有日期网格区域可以无限垂直平滑滚动。
- 滚动日期网格时,顶部的年月标题会根据可视区域内占比最大的月份实时更新。
样式需求:
- 星期顺序:周一、周二、周三、周四、周五、周六、周日。
- 日期样式区分:
- 历史日期:灰色
- 当前日期:高亮
- 未来日期:正常色
- 所有周日使用特殊样式突出显示。
- Windows 日历风格,7列网格布局。
- 全屏 100vw 100vh,最小宽高 70px。
功能:
- 垂直无限滚动,向上加载历史,向下加载未来。
- 滚动性能优化,快速滚动不卡顿。
- 返回今日:平滑滚动到当天。
- 指定年月:选择后自动滚动到对应月份。
输出:完整可直接运行的 Vue3 单文件组件。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/261231.html