基于Vue实现支持按周切换的日历

基于Vue的日历小功能，可根据实际开发情况按每年、每月、每周、进行切换，具体内容如下

js部分：目前默认显示一周，可根据实际情况更改

 @import "~base";

 .date {
 height: px2rem(180);
 color: #333;

 .month {
  font-size: px2rem(24);
  text-align: center;
  margin-top: px2rem(20);
 }

 .weekdays {
  display: flex;
  font-size: px2rem(28);
  margin-top: px2rem(20);

  li {
  flex: 1;
  text-align: center;
  }
 }

 .days {
  display: flex;

  li {
  flex: 1;
  font-size: px2rem(30);
  text-align: center;
  margin-top: px2rem(10);
  line-height: px2rem(60);

  .active {
   display: inline-block;
   width: px2rem(60);
   height: px2rem(60);
   color: #fff;
   border-radius: 50%;
   background-color: #fa6854;
  }

  .other-month {
   color: #e4393c;
  }
  }
 }
 }

相关参考链接：Vue.js创建Calendar日历效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。