vant日历组件Calendar中reset方法的使用

前提：假设当前日历是2022年的6月21号，然后点击选择其他日期时，比如想选择2002年6月15号，点击15号这个日期，但是没有点击确定，直接取消日期选择。之后再次点击选择日期时，日历中选中的日期是上次点击未确定的15号这个日期，而我们想要日历中选中的日期是当前选中的日期，也就是21号，这个如何设置呢。

使用vant日历组件中的reset方法，并配合ref进行使用。

步骤一：在日历组件中先给ref一个值，这里给的值是calendar

<van-calendar ref="calendar" v-model="show" @confirm="onConfirm" />

步骤二：可以在vue生命周期的updated函数中获取到ref，并使用reset

updated(){

// 这里reset没有传参，效果是：点击15号，并取消选择时，再次点击选择日历，当前日历选中的是21号，但是如果点击15号，并点击确定，也就是选择了15号这个日期之后，再次点击选择日期，这个当前选中的就不是15号，而是最大可取的那个日期。

this.$refs.calendar.reset();

//当给reset传参时，注意：此时传递的参数必须是Date类型。此时传参的方式，就可以实现上述题目所求，打开日历时会默认选择当前选中的日期。点击选择日期并取消，再次点击日历时还是会默认选择当前选中的21号，而不是取消的那个日期。

this.$refs.calendar.reset( date );

}

// 接下来说一下如果date不是Date类型，该如何转换。

这里说一下如果date的值是：20220621，那么可以使用moment(date).toDate()进行转换。

如果date的值是：2022年06月21号，就不能使用上面的方法进行转化，

以上就是reset方法的使用，欢迎补充~