怎么封装一个vue自定义日历组件
核心代码实现
1、梳理思路
获取到目标日期数据
获取到当前日期的各项重要属性,诸如
当前年,当前月,当前日期,当前星期几,当前月一共有几天,当前月的第一天对应的是星期几,上个月总共有多少天等。根据这些属性,来生成具体的
日历日期数据列表,然后将其循环渲染到模板中。当切换月份的时候,获取到新的目标日期对应的各项关键数据。vue检测到日历属性变化之后,通知页面进行更新。
2、初始化所需要的数据
一般来说,成熟的日历组件,日期都是一个双向绑定的变量。为了方便使用,我们也采用双向绑定的方式。