验证码: 看不清楚,换一张 查询 注册会员,免验证
  • {{ basic.site_slogan }}
  • 打开微信扫一扫,
    您还可以在这里找到我们哟

    关注我们

怎么封装一个vue自定义日历组件

阅读:184 来源:乙速云 作者:代码code

怎么封装一个vue自定义日历组件

核心代码实现

1、梳理思路

  • 获取到目标日期数据

  • 获取到当前日期的各项重要属性,诸如当前年当前月当前日期当前星期几当前月一共有几天当前月的第一天对应的是星期几上个月总共有多少天等。

  • 根据这些属性,来生成具体的日历日期数据列表,然后将其循环渲染到模板中。

  • 当切换月份的时候,获取到新的目标日期对应的各项关键数据。vue检测到日历属性变化之后,通知页面进行更新。

2、初始化所需要的数据

一般来说,成熟的日历组件,日期都是一个双向绑定的变量。为了方便使用,我们也采用双向绑定的方式。