制作日历组件，点击出来一个弹窗

实现效果如下图：点击弹出弹窗（弹窗用iview的modal组件），在输入框填写并存储（用了一下localstorage来存储），这个组件参考了条链接，原文存储的功能链接，还有以为博主的日历实现后续找到补上。按需选取吧代码部分。

      

代码贴上

CSS

.calender {
  text-align: center;
  min-width: 280px;
  /* height: 400px; */
  overflow: hidden;
}
.calender-title-wrapper {
  height: 30px;
  line-height: 30px;
}

.calender-title {
      display: -moz-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  display: flex;
  margin: 0 auto;
  width: 280px;
}

.calender-arrow-item {
  flex: 0 0 30px;
  cursor: pointer;
}
.calender-arrow-item.left1,.calender-arrow-item.left2{float: left;}
.calender-arrow-item.right1,.calender-arrow-item.right2{float: right;}

.calender-arrow-item.left1:after {
  content: "0AB ";
  display: inline;
}
.calender-arrow-item.left2:after {
  content: "0AB ";
  display: inline;
}
.calender-arrow-item.right1:after {
  content: "0BB";
  display: inline;
}
.calender-arrow-item.right2:after {
  content: "0BB";
  display: inline;
}
.calender-Date-text {
  flex: 1;
  color: #424242;
  font-size: 14px;
  display: inline-block;
}

.calender-days-wrapper {
  display: flex;
  height: 30px;
  line-height: 30px;
  margin-bottom: 11px;
}

.calender-days {
  flex: 1;
  color: #a7a7a7;
  font-size: 14px;
    float: left;
  width: 14.285%;
}

.calender-item-wrapper {
  position: relative;
  float: left;
  width: 14.285%;
  height: 30px;
  line-height: 30px;
  color: #686868;
  cursor: pointer;
}
.calender-item-wrapper.active {
  background-color: #03a9f44f;
}
.active {
  background-color: #03a9f44f;
}
.tem-wrapper {
  position: absolute;
  left: 50%;
  height: 10px;
  width: 30px;
  transform: translate3d(-50%, 35px, 0);
  font-size: 0;
}

.temp {
  position: relative;
  display: inline-block;
  line-height: 10px;
  width: 6px;
  height: 6px;
  background: #4fff41;
  border-radius: 3px;
  top: -20px;
  margin: 0 2px;
}

.calender-item {
  position: absolute;
  left: calc(50% - 15px);
  top: calc(50% - 15px);
  height: 30px;
  width: 30px;
  border-radius: 20px;
  line-height: 30px;
}

.calender-item:hover {
  background: #2a81e2;
}
.no-current-day .calender-item {
  color: #dcdcdc;
}
.currentDay .calender-item {
  color: #ffffff;
  background: #2a81e2;
}
.calender-item {
  /* background :#FFC912; */
}
.calender-item.active {
  color: #ffffff;
}
.calender-item {
  /* background: #FFC912; */
}
.calender-mask-wrapper {
  height: 37px;
}

.calender-mask-item {
  height: 37px;
  line-height: 37px;
  width: 25%;
  float: left;
}

.tem {
  margin-right: 3px;
  display: inline-block;
  height: 8px;
  width: 8px;
  border-radius: 4px;
}

.text {
  font-size: 14px;
}

button.ivu-btn.ivu-btn-save{
    border-color: #1E9FFF;
    background-color: #1E9FFF;
    color: #fff;
}
button.ivu-btn.ivu-btn-save:hover{
    opacity: .9;
    text-decoration: none;
}

.ivu-select-dropdown{
  z-index: 1001;
}

结构部分:

    <div class="calender">
      <div class="calender-title-wrapper">
        <div class="calender-title">
          <div class="calender-arrow-item left2" v-if="false"></div>
          <div class="calender-arrow-item left1" @click="month--"></div>
          <div class="calender-Date-text">{{year}}年{{month}}月</div>
          <div class="calender-arrow-item right1" @click="month++"></div>
          <div class="calender-arrow-item right2" v-if="false"></div>
        </div>
      </div>
      <div class="calender-content-wrapper">
        <div class="calender-days-wrapper">
          <div class="calender-days">日</div>
          <div class="calender-days">一</div>
          <div class="calender-days">二</div>
          <div class="calender-days">三</div>
          <div class="calender-days">四</div>
          <div class="calender-days">五</div>
          <div class="calender-days">六</div>
        </div>
        <div class="calender-content">
          <div class="calender-item-wrapper" v-for="item in daysArr" :class="{'no-current-day':item.month!=month,
                    active:item === clickItemObj,
                    currentDay:item.day===_CurrentDate.day&&
                               item.month===_CurrentDate.month&&
                               item.year===_CurrentDate.year}" @click="_clickDaysItem(item)">
            <div class="calender-item">{{item.day}}</div>
            <div class="tem-wrapper">
              <span class="temp" v-for="d in markArr" v-if="_visibleTemp(d,item)"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Modal title="add new note" v-model="noteSome" class-name="vertical-center-modal"
      footerHide class="memo">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="theme:" prop="theme">
          <Input v-model="formValidate.theme" placeholder="please send the theme..."></Input>
        </FormItem>
        <FormItem label="currentTime:">
          <p>{{currentTime}}</p>
        </FormItem>
        <FormItem label="reminderTime:" prop="pickTime">
          <DatePicker type="datetime" placeholder="please choose the time" v-model="formValidate.pickTime"></DatePicker>
        </FormItem>
        <FormItem label="content:" prop="desc">
          <Input id="text_book" v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
            placeholder="please send the content..."></Input>
        </FormItem>
        <div class="ivu-modal-footer">
          <slot name="footer">
            <button class="ivu-btn ivu-btn-save" @click.stop.prevent="handleSubmit(dateValue,'formValidate')">save</button>
            <button class="ivu-btn ivu-btn-info" @click.stop.prevent="handleReset('formValidate')">delete</button>
            <button class="ivu-btn ivu-btn-info" @click.stop.prevent="clickCancel">cancel</button>
          </slot>
        </div>
      </Form>
    </Modal>
    <Modal v-model="confirmDele" width="360" class-name="vertical-center-modal">
      <p slot="header" style="color:#f60;text-align:center">
        <span>conform cancel</span>
      </p>
      <div style="text-align:center">
        <p>please confirm?</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" @click="del('formValidate')">cancel</Button>
      </div>
    </Modal>

逻辑部分

    data() {
      return {
        day: "",
        month: "",
        year: "",
        currentDays: "",
        daysArr: [],
        clickItemObj: {},
        noteSome: false,
        formValidate: {
          theme: "",
          pickTime: "",
          desc: ""
        },
        ruleValidate: {
          theme: [{ message: "please send theme", trigger: "blur" }],
          pickTime: [{ type: "date", message: "choose time", trigger: "change" }],
          desc: [{ message: "send content", trigger: "blur", value: "" }]
        },
        dateValue: "",
        markJson: {},
        dataAll: {},
        markArr: [],
        theUserCode: "",
        currentTime: this.formatDateTime(new Date()),
        confirmDele: false
      };
    },
    created() {
      this.theUserCode = store.state.sys.userCode;
      this.getMemo();
    },
    mounted() {
      this._getCurrentDate();
    },
    methods: {
      // 获取当前时间
      formatDateTime(date) {
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = date.getDate();
        d = d < 10 ? "0" + d : d;
        var h = date.getHours();
        h = h < 10 ? "0" + h : h;
        var minute = date.getMinutes();
        minute = minute < 10 ? "0" + minute : minute;
        var second = date.getSeconds();
        second = second < 10 ? "0" + second : second;
        return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
      },
      //点击日期
      _clickDaysItem(item) {
        this.dateValue = item.year + "/" + item.month + "/" + item.day;
        let data = { year: item.year, month: item.month, date: item.day };
        this.dataAll = { year: item.year, month: item.month, date: item.day };
        this.$refs["formValidate"].resetFields();
        this.currentTime = this.formatDateTime(new Date());

        for (let i = 0; i < this.markArr.length; i++) {
          if (this.markArr[i] == this.dateValue) {
            this.formValidate.theme = this.markJson[this.dateValue][0].theme;
            this.formValidate.pickTime = this.markJson[
              this.dateValue
            ][2].pickTime;
            this.formValidate.desc = this.markJson[this.dateValue][3].desc;
            this.currentTime = this.markJson[this.dateValue][1].saveTime;
          }
        }

        if (this.clickItemObj === item) {
          this.clickItemObj = {};
        } else {
          this.clickItemObj = item;
        }

        //非当前月份跳转
        if (item.month != this.month) {
          this.month = item.month;
        }
        //传入事件筛选回返
        this.openPop();
        //传入当前时间
      },
      // 获取已存的日期
      getMemo() {
        let theMemo = JSON.parse(
          localStorage.getItem(this.theUserCode + "dateJson")
        );
        if (theMemo != null) {
          this.markJson = theMemo;
        }
        this.markArr = [];
        for (var a in this.markJson) {
          this.markArr.push(a);
        }
      },
      //调用弹出层方法
      openPop() {
        this.noteSome = true;
      },
      //是否显示mark
      _visibleTemp(d, item) {
        // 展示是否标记
        let dateStr = `${item.year}/${item.month}/${item.day}`;
        if (d == dateStr) {
          return d.includes(dateStr);
        }
      },
      //获取月份天数
      _getDaysForMonth(year, month, type) {
        let temp = new Date(year, month, type);
        let day = new Date(temp.getTime() - 864e5).getDate();
        this.currentDays = day;
        this._getFirstDaysForMonth(this.year, this.month);
      },
      //获取当前日期
      _getCurrentDate() {
        let date = new Date();
        this.day = date.getDate();
        this.month = date.getMonth() + 1;
        this.year = date.getFullYear();
        this._getDaysForMonth(this.year, this.month, 1);
      },
      //获取切换页月份第一天是周几与最后一天并获取月前与月后填补数组
      _getFirstDaysForMonth(year, month) {
        let weekdays = new Date(`${year}/${month}/01`).getDay();
        let beforeMonthDaysArr = [];
        let currentMonthDaysArr = [];
        let afterMonthDaysArr = [];
        //获取上一月总天数
        if (month) {
          let temp = new Date(year, month - 1, 1);
          let day = new Date(temp.getTime() - 864e5).getDate();
          for (let i = 0; i < day; i++) {
            beforeMonthDaysArr.push({
              year: year,
              month: month - 1,
              day: i + 1
            });
          }
          beforeMonthDaysArr.splice(0, beforeMonthDaysArr.length - weekdays);
        } else {
          //12月
        }
        //获取当前月总天数
        let temp = new Date(year, month, 1);
        let day = new Date(temp.getTime() - 864e5).getDate();
        let afterWeekdays = new Date(`${year}/${month}/${day}`).getDay();
        for (let i = 0; i < day; i++) {
          currentMonthDaysArr.push({
            year: year,
            month: month,
            day: i + 1
          });
        }

        if (
          beforeMonthDaysArr.length +
            currentMonthDaysArr.length +
            6 -
            afterWeekdays ===
          35
        ) {
          for (let i = 0; i < 13 - afterWeekdays; i++) {
            afterMonthDaysArr.push({
              year: year,
              month: month + 1,
              day: i + 1
            });
          }
        } else {
          for (let i = 0; i < 6 - afterWeekdays; i++) {
            afterMonthDaysArr.push({
              year: year,
              month: month + 1,
              day: i + 1
            });
          }
        }
        this.daysArr = [
          ...beforeMonthDaysArr,
          ...currentMonthDaysArr,
          ...afterMonthDaysArr
        ];
      },
      //保存按钮方法
      handleSubmit(obj_date, name) {
        this.$refs[name].validate(valid => {
          // 判断是否为空
          if (valid && this.theUserCode != undefined && this.theUserCode != "") {
            this.chose_moban(this.dateValue, this.markJson);
            this.noteSome = false;
          } else {
            // 为空
            // this.$Message.error('Fail!');
          }
        });
      },
      // 存储
      chose_moban(obj_date, markJson) {
        if (this.formValidate.desc == "") {
          delete markJson.obj_date;
        } else {
          markJson[obj_date] = [
            { theme: this.formValidate.theme },
            { saveTime: this.currentTime },
            { pickTime: this.formatDateTime(this.formValidate.pickTime) },
            { desc: this.formValidate.desc }
          ];
        }
        this.noteSome = false;
        localStorage.setItem(
          this.theUserCode + "dateJson",
          JSON.stringify(markJson)
        );
        this.getMemo();
      },
      handleReset(name) {
        // 撤销
        this.confirmDele = true;
      },
      del(name) {
        this.$refs[name].resetFields();
        this.chexiao(this.dateValue, this.markJson);
        this.confirmDele = false;
        this.chose_moban(this.dateValue, this.markJson);
        this.getMemo();
      },
      chexiao(obj_date, markJson) {
        //删除指定日期标注
        delete markJson[obj_date];
      },
      clickCancel() {
        this.noteSome = false;
      },
      _choseMoban(obj_date, markJson) {}
    },
    watch: {
      month() {
        if (this.month === 0) {
          this.month = 12;
          this.year--;
        }
        if (this.month === 13) {
          this.month = 1;
          this.year++;
        }
        this._getDaysForMonth(this.year, this.month, 1);
      }
    },
    computed: {
      _CurrentDate() {
        let date = new Date();
        let { day, month, year } = {
          day: date.getDate(),
          month: date.getMonth() + 1,
          year: date.getFullYear()
        };
        return { day, month, year };
      }
    }