Vue基于flex布局的日历组件

详情请看：http://111.231.145.124:8006/MyBlog/#/lawrence/blog/details/fa60b805d54d2866edcc81c8994e6fe8

闲来无事，自己封装了一个简单的日历组件，将源码中的Calendar组件复制到自己的项目下即可使用，使用方式参考，组件使用说明

接下来，简单说明实现思路：

（1）首先，先完成页面的基本布局：

 

   

     

       

     

{{year}}年{{month}}月

     

       

   

     

{{item}}

   

     

       

         

{{item2.index}}

 

从上到下依次为month/week/day 重点在日期，默认当前日期当前月份，在js中去获取当月日期list，并进行一定的重组，通过两层循环，第一层是遍历它是第几行，第二层遍历第几个，每一行flex是1，每天flex：1，平均分为七份。以下是css：

.calendar{

    display: flex;

    flex: 1;

    flex-direction: column;

  }

  .week{

    display: flex;

    flex: 1;

    justify-content: center;

    align-items: center;

    background:  #f2f2f2;

    font-size: 26px;

    padding: 20px;

  }

  .weekday{

    display: flex;

    flex: 1;

    justify-content: center;

  }

  .month{

    display: flex;

    flex: 1;

    justify-content: center;

    align-items: center;

    font-size: 28px;

    height: 60px;

  }

  .month_select{

    display: flex;

    flex: 1;

    justify-content: center;

    align-items: center;

    height: 100%;

  }

  .month_select_left{

    display: flex;

    flex: 1;

    justify-content: flex-start;

    align-items: center;

    height: 100%;

    padding-left:50px;

  }

  .month_select_left:active{

    background-color: #e6e6e6

  }

  .month_select_right:active{

    background-color: #e6e6e6

  }

  .month_select_right{

    display: flex;

    flex: 1;

    justify-content: flex-end;

    align-items: center;

    height: 100%;

    padding-right:50px;

  }

  .left {

    border: solid #00A6E4;

    border-width: 0 3px 3px 0;

    /* display: inline-block; */

    padding: 5px;

    transform: rotate(135deg);

    height: 3px;

    width: 3px;

  }

  .right {

    border: solid #00A6E4;

    border-width: 0 3px 3px 0;

    /* display: inline-block; */

    padding: 5px;

    transform: rotate(-45deg);

    height: 3px;

    width: 3px;

  }

  .date{

    padding:0px 20px;

    text-align: center;

    font-size: 20px;

    display: flex;

    flex: 1;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .column{

    display: flex;

    flex: 1;

    width: 100%;

    justify-content: center;

    align-items: center;

  }

  .day{

    display: flex;

    flex: 1;

    justify-content: center;

    align-items: center;

    font-size: 24px;

  }

  .day_text{

    width: 70px;

    float: left;

    height: 70px;

    line-height: 70px;

    /*margin:20px;*/

    /* background: blue; */

    border-radius: 70px;

  }

  .day_disabled{

    color:  #d9d9d9

  }

  .day_select{

    background:#00A6E4;

    color:white;

  }

在点击时触发事件，改变选中元素，同时选中元素和非选中以及不可选元素具有不同样式，通过class区分，点击向右，获取下个月日期list，同时也构造数组展示，向左同理，以下是js:

第一次写技术博客，写的不好请见谅。

详细请看：http://111.231.145.124:8006/MyBlog/#/lawrence/blog/details/fa60b805d54d2866edcc81c8994e6fe8