vue2.x ---vue-mobile-calendar的学习使用笔记

项目需求：日历显示2中状态 ，一种是从注册日期起到现在没捐款的日子，一种是捐款过的日子，

 插件github地址:https://github.com/lx544690189/vue-mobile-calendar

插件npm地址：https://www.npmjs.com/package/vue-mobile-calendar 

 1、安装

npm i vue-mobile-calendar
2、引入

import Calendar from 'vue-mobile-calendar'

Vue.use(Calendar);

3、使用（页面内联显示）：

<div id="calendar">
        <inlineCalendar v-if='defaultDate.length>0'   mode="multiple"  :disabledDate="disabledDate"  :defaultDate="defaultDate" />
      </div>

该插件分2种形式：

calendar为底部弹窗显示，inlineCalendar为页面内联显示（可放置页面任意地方）

 js:

 data(){
    return {
         defaultDate:[],
         disabledDate:[],
    }
  },

然后在方法中请求参数进行赋值即可，若请求响应太慢，可以使用localStorage进行缓存。

我的需求是只展示，不允许点击，而插件自带点击事件，我取巧写个透明div把日期可点击区域进行了遮挡来阻止点击日期

css:

.home /deep/ .m-calendar .m-months-container .m-months-wrapper .m-months .m-row:last-child{
  display: none;
}
 .home /deep/ .m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day .m-today{
   background: none !important;
}
 .home /deep/ .m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day .m-select{
  background: url('../assets/jk_noheart.png') no-repeat !important;
  background-size: contain!important;
  color: #666;
}
.home /deep/ .m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day .m-disable{
  background: url('../assets/jk_heart.png') no-repeat !important;
  background-size: contain!important;
  text-decoration: none!important;
  color: #fff;
}
.home /deep/ .m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day .m-day-num{
  border-radius: 0!important;
}