日历组件

页面引用日历组件

  <com-calendar
          :click-current-day="clickCurrentDay"
          :calender-data="calenderData"
     />

import comCalendar from '@/components/PSR/comCalendar.vue'

数据双向绑定，监听组件得年份和月份得变化 1613692800000 2021-02-19 08:00:00

v-model="my_data"

watch: {
    my_data(val){
      let calender_data=val.getTime()   //转换为时间戳形式
      console.warn(val.getTime())
    }
  },

comCalendar.vue

<template>
  <div class="c-cal">
    <el-calendar  v-model="my_data">
      <template
        slot="dateCell"
        slot-scope="{date, data}"
      >
        <div
          class="c-row"
          @click="clickDay(data.day.split('-')[1], data.day.split('-')[2], data)"
        >
          <div class="c-rows">
            <div
              class="c-row-text"
              :class="data.isSelected ? 'is-select' : ''"
            >{{ data.day.split('-')[2] }}
            </div>
          </div>
          <div
            v-for="(item, index) in calenderData"
            :key="index"
            class="c-tag cp-text-10"
            :class="item.day == data.day.split('-')[2] && item.month == data.day.split('-')[1] ? '' : 'c-tag-hide'"
          >{{ item.count }}
          </div>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  props: {
    addplan: {
      type: Function,
      default: null
    },
    calenderData: {
      type: Array,
      default: () => {
        return []
      }
    },
    clickCurrentDay: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      my_data: '',
      // dateList: [
      //   { mouVal: 8, dayVal: 2, value: 4 },
      //   { mouVal: 8, dayVal: 7, value: 7 },
      //   { mouVal: 8, dayVal: 12, value: '99+' },
      //   { mouVal: 8, dayVal: 16, value: 12 },
      //   { mouVal: 9, dayVal: 17, value: 9 }
      // ]
      // range_data: []
    }
  },
  watch: {
    my_data(val){
      let calender_data=val.getTime()
      localStorage.setItem('calender_data',calender_data)
      console.warn(val.getTime())
    }
  },
  mounted() {
    // this.range_data[0] = '2020-09-14'
    // this.range_data[1] = '2020-09-27'
  },
  methods: {
    clickDay(month, day, data) {
      console.log(month, day)
      console.log(data)
      if (this.clickCurrentDay) {
        this.clickCurrentDay(month, day, data)
        this.$emit('getClickDate', { month, day })
      }
      try {
        this.addplan(month, day)
      } catch (err) {
        console.log(err)
      }
    }
  }
}