如何封裝vue日歷組件

這篇文章將為大家詳細講解有關如何封裝vue日歷組件，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

具體內容如下

圖示

封裝的組件的代碼如下

<template>
  <div class="calendar">
    <!-- 選擇日歷的彈出層 -->
    <div class="model_mask" v-show="showtimemask" @click="showmask1()">
    </div>
    <div class="bouncedBox" v-show="showtimemask">
      <div class="mobile-top">
        <div class="sel-time">
          <p>開始時間</p>
          <p class="start-date">{{starttime.substring(0,4)+'-'+starttime.substring(4,6)+'-'+starttime.substring(6,8)}}
          </p>
        </div>
        <div class="unsel-time">
          <p>結束時間</p>
          <p class="end-date">
            {{endtime==''?'請選擇結束日期':endtime.substring(0,4)+'-'+endtime.substring(4,6)+'-'+endtime.substring(6,8)}}</p>
        </div>
      </div>
 
      <div class="title">
        <div class="btn" @click.stop="last()" :class="(month<=nowmonth)&&(Year<=nowYear)?'noclick':'' ">上一月</div>
        <div class="text">{{Year}}年{{month}}月</div>
        <div class="btn" @click.stop="next()">下一月</div>
      </div>
 
      <div class="head">
        <div class="days" v-for="(item,index) in ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']" :key="index">
          {{item}}
        </div>
      </div>
 
      <div class="wrap">
        <div class="span" v-for="(item,index) in calendarList" :key="index" @click.stop="click(item.count)" :class="item==''?'kong'
      :item.count<nowtime?'noclick'
      :(item.count>=starttime&&item.count<=endtime)||item.count==starttime?'active':''">
          {{item.value}}
        </div>
      </div>
 
      <div class="bottombtn">
        <button class="cancle-btn" @click.stop='cancle()'>取消</button>
        <button class="sure-btn" @click.stop='firm()'>確定</button>
      </div>
 
    </div>
  </div>
</template>
 
<script>
  export default {
    name: "Calendar",
    data() {
      return {
        showtimemask:false,
        Puton_time: '', //投放日期  默認今日 展示
        Puton_Start:'',  //為了保存投放開始結束的日期  用來點擊取消按鈕時初始化選中的值
        Puton_End:'',
        nowtime: '', //當前日期的時間-----20190203格式  用于比較
        clickitem: '', //保存每次點擊的時間-----20190203格式  用于比較
        clickcount: 0, //點擊次數-------判斷開始時間還是結束時間
        starttime: '', //開始時間  數字   默認當天日期
        endtime: '', //結束時間  數字   默認當天日期
        Year: new Date().getFullYear(), //日歷上的年份   ----動態改變的
        month: new Date().getMonth() + 1, //日歷上的月份 ----  動態改變的
        Day: new Date().getDate(), //日歷上的天份         ----- 動態改變的
 
        nowYear: new Date().getFullYear(),
        nowmonth: new Date().getMonth() + 1,
        nowDay: new Date().getDate(),
        calendarList: [],
      };
    },
 
    created() {
      //關于日歷的操作開始
      this.Draw(this.nowYear, this.nowmonth);
 
      let time_month = this.nowmonth; //現在的月份
      let time_day = this.nowDay; //現在的天數
      if (this.nowmonth < 10) {
        time_month = 0 + '' + this.nowmonth;
      }
      if (this.nowDay < 10) {
        time_day = 0 + '' + this.nowDay;
      }
 
      this.nowtime = this.nowYear + '' + time_month + '' + time_day;
      this.starttime = this.nowtime;
      this.endtime = this.nowtime;
 
      this.Puton_time = this.starttime.substring(0, 4) + '-' + this.starttime.substring(4, 6) + '-' + this.starttime
        .substring(6, 8) + '至今';
 
        this.Puton_Start = this.nowtime,
        this.Puton_End = this.nowtime,
 
 
        this.$emit('str',this.Puton_time)
 
      //關于日歷的操作結束
    },
    mounted() {
 
    },
    methods: {
      showmask1() {
        if (this.showtimemask == true) {
          // this.showtimemask=false;   //隱藏彈框
          this.cancle();
        } else {
          this.showtimemask = true;  //顯示彈框
        }
      },
 
      Draw: function (Year, Month) {
        //日期列表
        var calendar = [];
 
        //用當月第一天在一周中的日期值作為當月離第一天的天數(獲取當月第一天是周幾)
        for (var i = 1, firstDay = new Date(Year, Month - 1, 1).getDay(); i <= firstDay; i++) {
          calendar.push("");
        }
 
        //用當月最后一天在一個月中的日期值作為當月的天數
        for (var i = 1, monthDay = new Date(Year, Month, 0).getDate(); i <= monthDay; i++) {
 
          let time_month = Month;
          let time_day = i;
          if (Month < 10) {
            time_month = 0 + '' + Month;
          }
          if (i < 10) {
            time_day = 0 + '' + i;
          }
 
          calendar.push({
            value: i,
            count: Year + '' + time_month + '' + time_day
          })
        }
        this.calendarList = calendar;
        console.log(calendar)
      },
 
      last() {
        this.month--;
        if (this.month == 0) {
          this.month = 12;
          this.Year--;
        }
 
        this.Draw(this.Year, this.month);
      },
 
      next() {
        this.month++;
        if (this.month == 13) {
          this.month = 1;
          this.Year++;
        }
 
        this.Draw(this.Year, this.month);
      },
 
      click(item) {
        this.clickcount++;
        this.clickitem = item;
        //開始日期
        if (this.clickcount % 2 == 1) {
          this.starttime = this.clickitem;
          this.endtime = ''
        } else {
          this.endtime = this.clickitem;
          if (this.starttime > this.endtime) {
            this.endtime = this.starttime;
            this.starttime = this.clickitem;
          }
        }
      },
 
      firm() {
        this.showtimemask = false;
        //當選擇的開始時間與結束時間相同時   顯示為2019-07-19當天
        if (this.starttime == this.endtime) {
          this.Puton_Start = this.starttime,
          this.Puton_End = this.endtime,
 
          this.Puton_time = this.starttime.substring(0, 4) + '-' + this.starttime.substring(4, 6) + '-' + this.starttime
            .substring(6, 8) + '當天';
 
            this.$emit('str',this.Puton_time);
 
            //否則顯示xxx 至   xxx
        } else {
 
          this.Puton_Start = this.starttime,
          this.Puton_End = this.endtime,
          this.Puton_time =
            this.starttime.substring(0, 4) + '-' + this.starttime.substring(4, 6) + '-' + this.starttime.substring(6,
            8) +
            '至' + this.endtime.substring(0, 4) + '-' + this.endtime.substring(4, 6) + '-' + this.endtime.substring(6, 8);
 
             
 
            this.$emit('str',this.Puton_time)
        }
 
      },
      // 取消按鈕
      cancle() {
        this.showtimemask = false; 
        //當按取消按鈕時   彈框中選中的區域等于上一次選中的區域
        this.starttime = this.Puton_Start;
        this.endtime = this.Puton_End;
        // this.Puton_time = this.starttime.substring(0, 4) + '-' + this.starttime.substring(4, 6) + '-' + this.starttime
        //   .substring(6, 8) + '至今';
 
        //   this.$emit('str',this.Puton_time)
      }
    }
  };
 
</script>
 
<style scoped lang="scss">
  @import "../common/common.css";
 
  // 日歷的樣式
  .model_mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba($color: #000000, $alpha: 0.5);
  }
 
  .bouncedBox {
    position: fixed;
    background: #fff;
    bottom: 0;
    left: 0;
    right: 0;
 
    //開始結束日期的顯示
    .mobile-top {
      display: flex;
      flex-wrap: nowrap;
      background: #fff;
      padding: 0.1rem 0;
 
      .sel-time {
        text-align: center;
        width: 50%;
 
        // border-bottom: solid 2px #2a81e8;
        .start-date {
          color: #b1b1b1;
          margin-top: 0.05rem;
        }
      }
 
      .unsel-time {
        text-align: center;
        width: 50%;
 
        .end-date {
          color: #b1b1b1;
          margin-top: 0.05rem;
        }
      }
    }
 
    // 左右選擇月份  顯示當前年月
    .title {
      width: 100%;
      height: 40px;
      background-color: #60a7e8;
      display: flex;
      flex-wrap: nowrap;
      text-align: center;
      color: #fff;
      font-weight: bold;
      line-height: 40px;
 
      .btn {
        width: 1.2rem;
 
        &.noclick {
          pointer-events: none;
          background: #ccc;
        }
      }
 
      .text {
        flex: 1;
      }
    }
 
    //表頭  周1到周天的顯示
    .head {
      display: flex;
      flex-wrap: nowrap;
      text-align: center;
      height: 40px;
      line-height: 40px;
 
      .days {
        flex: 1;
      }
    }
 
    //日歷表區域
    .wrap {
      width: 7.5rem;
      height: auto;
      overflow: hidden;
      padding-bottom: 1rem;
 
      .span {
        width: 1.07142rem;
        height: 0.6rem;
        background: #fff;
        color: #337ab7;
        float: left;
        text-align: center;
        line-height: 0.6rem;
 
        &.active {
          background: #037ef5;
          color: #fff;
        }
 
        &.noclick {
          pointer-events: none;
          background: #ccc;
        }
 
        &.kong {
          background: #fff;
          pointer-events: none;
        }
      }
    }
 
    //底部按鈕區域
    .bottombtn {
      height: 40px;
      width: 100%;
      display: flex;
      flex-wrap: nowrap;
 
      button {
        flex: 1;
      }
 
      .sure-btn {
        background: #037ef5;
 
        color: #fff;
      }
    }
 
  }
 
</style>

使用方法

main,js引入  全局注冊組件

import Calendar from './components/fz_zujian/Calendar.vue'    //日歷組件
Vue.component('Calendar',Calendar)

頁面使用

<div class="" @click="showmodel()">{{str}}</div>
 
<Calendar ref="chi1" v-on:str="getChild"></Calendar>
 
 data() {
      return {
        str: '',
      }
  }
 
 showmodel(){
        this.$refs.chi1.showmask1()
      },
 
      getChild(val) {
        this.str = val
      },

關于“如何封裝vue日歷組件”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。