极点日历 小程序组件封装

<template>
  <div class="calendar-div">
    <div class="date-but">
      <div>
        <span class="but-left" @click="dateBtn(1)">取消</span>
      </div>
      <div>
        <span class="but-right" @click="dateBtn(2)">确定</span>
      </div>
    </div>
    <calendar :days-color="dayStyle" weeks-type="cn" @dayClick="dayClick"/>
  </div>
</template>
<script>

export default {
  data() {  // 设置数据
    return {
      dateTime: null,
      dayStyle: [
        {month: 'current', day: new Date().getDate(), color: 'white', background: '#AAD4F5'},
        // {month: 'current', day: new Date().getDate(), color: 'white', background: '#AAD4F5'}
      ],
    }
  },
  props: { //接收传过来的数据
    showMask: Boolean,
  },
  onUnload: function () { //页面销毁
    this.pageClose();
  },
  onLoad() {  //页面第一次加载
    console.log('打开日期组件：', this.dateTime)
  },
  methods: {  //方法
    //给点击的日期设置一个背景颜色
    dayClick: function (event) {
      let day = event.target.day;
      let month = event.target.month;
      let year = event.target.year;
      if (day < 10) {
        day = '0' + day;
      }
      if (month < 10) {
        month = '0' + month;
      }
      this.dayStyle = [{month: 'current', day: day, color: 'white', background: '#AAD4F5'}];
      this.dateTime = year + '-' + month + '-' + day;
      console.log(this.dateTime)
    },
    dateBtn(type) {
      let json = {
        showMask: !this.showMask,
        dateTime: type === 1 ? null : this.dateTime,
      }
      console.log('日期选择：', type, '传递数据：', json)
      this.$emit('myDateChange', json)
    },
    pageClose() { //页面销毁
    },
  }
}

</script>

<style lang="scss" scoped>
.calendar {
  background-color: white; /*背景色为白色*/
  padding-top: 10px; /*上内边距为10px*/
  color: #38ACFF;
  border-radius: 15px; /*添加边框圆角*/
  border: 1px solid #38ACFF;
  -webkit-box-shadow: 0 0 10px #38ACFF;
  -moz-box-shadow: 0 0 10px #38ACFF;
  box-shadow: 0 0 10px #38ACFF;

}

.calendar-div {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  padding: 10px 0;
  background-color: white;
}

.date-but {
  display: flex;
  color: white;
}

.date-but div {
  width: 50%;
}

.date-but .but-left {
  margin-left: 10px;
  float: left;
  padding: 4px 8px;
  background-color: #FFB800;
  border-radius: 5px;
}

.date-but .but-right {
  margin-right: 10px;
  float: right;
  padding: 4px 8px;
  background-color: #1E9FFF;
  border-radius: 5px;

}
</style>