Vant组件库封装可翻页日历组件

前言

我们在进行VUE开发的时候有的时候会使用到VantUI组件库：

https://vant-contrib.gitee.io/vant/v2/#/zh-CN/home#jie-shao

Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

但是近期在使用Vant组件库（下方所有Vant组件库均指代Vant2.x）中的日历时发现了一个bug：

BUG描述

需求是获取到当前日历的展示月份，然后使用按钮对日历进行增加或者减少操作，从而使得视图能跳转到增加或减小到的月份，如这样：

但是在调用官方api来获取当前进入视图的月份的信息的时候发现了一个致命问题:

就上图而言，可以看出，当用户首次打开日历（注意，是首次）的时候，往下滑动，确实会调用官方api，month-show进行传参显示（打印在控制台里面），但是回滑的时候却并不会触发month-show这个api。就比如用户自上而下从2月滑到了5月，其中2、3、4、5月份的信息都会调用month-show这个api，但是从5月往回滑却不会触发month-show这个api。

一句话，只有当月份首次进入视图的时候才会触发month-show这个api，非首次进入视图并不会触发month-show这个api。这显然和官方的描述是相悖的:

调用的demo的源码：

问题分析

到现在可以看出并不是开发者调用出了问题，而是Vant的日历组件的源码就有问题，算是个原生bug了。于是在不懈查找下，查到了vant中的日历对应month-show这个api的源码：

对应路径：\node_modules\vant\es\calendar\index.js

可以看出，在代码中的逻辑是遍历每个月份然后判断是否显隐，如果计算得知是应该展示的，则调用

this.$emit('month-show');

这个方法将满足要求的月份的信息和数据传输出去。

包括了代码的这一部分，总体上构成了对当前日历是否显隐的逻辑判断。

具体是哪里计算错误，就需求为导向而言就没必要深究了。只是知道对于Vue2.x(至少截止到2.12.54版本，bug依旧存在)而言，想修复这个bug只能对源码进行修改。

BUG解决思路

既然，使用视图判断不行，那就直接取日历的副标题，也就是subTitle,判断当其改变的时候，自动触发month-show方法实现类似于日历月份主体进入视图触发的效果。

但是从该图可以看出，日历的主体明明是6月份，但是副标题却显示的是5月份，这又是一个bug。。。不过此bug可以将传出的月份进行或增或减来校准一下。

当currentMonth（也就是subTitle对应的副标题）数据改变的时候，从month-show传出该数据。

if (currentMonth && (this.subtitle !== currentMonth.title)){
    this.subtitle = currentMonth.title;
    this.$emit('month-show', {
        date: currentMonth.date,
        title: currentMonth.title
    });
}

同时删除该部分代码：

注意： 修改node_modules源码后记得重新跑进程启动。

效果测试

可以看到修复效果良好，只不过可能得对输出的月份进行增减来进行校准。

需求实现全部代码：

calendar.vue:

config.js:

import moment from 'moment';
//时间格式
export const dateFormat ="YYYY-MM-DD";
//当前时间
const today = new Date();
//默认起始时间
const defaultStartDay = moment().add(-1, "years");
//时间筛选框默认时间
export const defaultDate = [new Date(defaultStartDay), today];
//日期选择限制
export const maxDateRange = [new Date(defaultStartDay), today];

父组件调用：

最终效果：