VUE开发一个组件——日历选择控件

前言

前面文章《如何将你封装的组件使用 npm 发布》，主要时讲如何封装组件，然后通过npm发布，今天就给大家造个轮子。另外一篇文章《小程序日历控件js日历数据组装》,是讲小程序日历控件的封装，但是代码都是用的vue写的，js代码可以复用，除了view部分，需要小小变动外，所以我们之间用来封装就好了。

Github地址：vue-c-calendar

快速应用

# 安装
npm install vue-c-calendar -S

引入模块

import cCalendar from 'vue-c-calendar'
Vue.use(cCalendar)

组件参数

labels: {// 头部显示的文字部分（出发/到达）
  type: Array,
  required: true
},
isSame: { // 是否可以选择相同日期（起始日期）
  type: Boolean,
  default: false
},
startDate: String, // 已选择的开始时间
endDate: String, // 已选择的结束时间
showAmount: { // 共显示月份 默认3个月
  type: Number,
  default: 3
},
disableBefore: { // 禁用什么日期之前的日期（默认今天）
  type: String,
  default: formatDate(TODAY)
},
disableAfter: String, // 禁用什么日期之后的日期
start: String, // 什么月份开始（可以为空）
sameEnable: { // 是否需要判断禁用日期（可以为true）
  type: Boolean,
  default: true
}

源码地址：vue-c-calendar

view

js

css(sass)

#calerdar{
    background: #fff;
    ul,li{ 
      padding:0;
      margin:0;
      list-style:none
    }
    .layout-page-main{
 border-top:px2rpx(1) solid #E2E2E2;
    }
    #calendar-date{
 height: 4.2rem;
 overflow: hidden;
 .date{
     padding: 0.31rem 0;
     text-align: center;
     width: 10rem;
     .year{
  display: block;
  line-height: 1rem;
  font-size: 1rem;
  color: #9b9b9b;
     }
     .month-date{
  display: block;
  line-height: 1.5rem;
  font-size: 1.5rem;
  color: #3b4f62;
     }
     .label{
  display: block;
  line-height: 1rem;
  font-size: 1rem;
  color: #9b9b9b;
     }
     &.fl{
  float: left;
     }
     &.fr{
  float: right;
     }
     &.placeholder{
  height: 100%;
  position: relative;
  &::before{
      content: '';
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      height: 1px;
      width: 0.9rem;
      background-color: gray;
  }
     }
 }
 .spliter{
     $block-height: 2rem;
     height: $block-height;
     margin: 0.7rem auto;
     position: relative;
     overflow: hidden;
     &::before{
  content: '';
  position:absolute;
  display: block;
  height: $block-height;
  width: 1px;
  background-color: gray;
  left: 45%;
  transform: rotate(32deg);
     }
 }
    }
    #week-label{
 $height: 2rem;
 overflow: hidden;
 border-bottom: 1px solid #dedede;
 .item{
     float: left;
     width: (100%/7);
     text-align: center;
     $height: $height;
     line-height: $height;
     color: #b8b8b8;
     font-size: 1.2rem;
     &:first-child,
     &:last-child{
  color: #ff7362;
     }
 }
    }
    $item-width: (10rem / 7);
    $num-width: 2rem;
    $space-w: ($item-width - $num-width) * 0.5;
    #month-list{
 padding-top: 0.2rem;
 height: 100%;
 overflow: auto;
 .month-item{
     overflow: hidden;
     padding-top: 0.35rem;
     .month-info{
  line-height: 0.86rem;
  padding-left: 0.37rem;
  color: #b7b7b7;
  font-size: 1.5rem;
  text-align: left;
     }
     .month-main{
  overflow: hidden;
  padding-top: 0.2rem;
  .item{
      float: left;
      width: (100%/7);
      color: #969696;
      .num{
   display:block;
   position: relative;
   // margin: auto;
   height: $num-width;
   line-height: $num-width;
   text-align: center;
   font-size: 1rem;
      }
      &.disable{
   color: #e2e2e2;
      }
      &.today{
 color: #0cc071;
      }
      &.start-date .num{
 border-radius: .2rem 0 0 .2rem;
 background-color: #0cc071;
 color: #fff;
      }
      &.end-date .num{
   border-radius: 0 .2rem .2rem 0;
   background-color: #0cc071;
   color: #fff;
      }
      &.start-date{
   &.end-date .num{
     border-radius: .2rem;
   }
      }
      &.progress .num{
 background-color: #0cc0717d;
 color: #fff;
      }
  }
     }
 }
    }
    $space-w: 1rem;
    &[calendar-type="multiple"]{
 [state="complete"]{
     .start-date .num{
  margin-left: $space-w;
  padding-right: $space-w;
  border-top-left-radius: 99rem;
  border-bottom-left-radius: 99rem;
     }
     .end-date .num{
  margin-right: $space-w;
  padding-left: $space-w;
  border-top-right-radius: 99rem;
  border-bottom-right-radius: 99rem;
     }
 }
 [state="waiting"]{
     .start-date .num{
  margin: 0 $space-w;
  border-radius: 100%;
     }
 }
    } 
    &[calendar-type="single"]{
 // set-header-height(1.3rem)
 #week-label{
     margin-top: 0.3rem;
 }
 .item.start-date .num{
     margin: 0 $space-w;
     padding: 0;
     border-radius: 100%;
 }
    }
}