uniapp日历组件

uniapp日历组件

自己写的日历组件，欢迎指正

<template>
  <view class="fu-calendar-wrap">
    <!-- 日历选择 start -->
    <view class="fu-calendar-data fu-flex fu-justify-center fu-align-center fu-margin fu-height-72" v-if="changeTitle">
      <block v-if="changeYear">
        <view class="fu-arrow fu-left fu-flex fu-justify-between fu-align-center" @click="prevYear">
          <text class="iconfont icon-changyongicon-" :style="[yaColor]"></text>
        </view>
      </block>
      <block v-if="changeMonth">
        <view class="fu-arrow single fu-left fu-flex fu-justify-between fu-align-center" @click="prevMonth">
          <text class="iconfont icon-jiantouyou" :style="[maColor]"></text>
        </view>
      </block>
      <view class="fu-title fu-text-32 fu-text-333">{
   {
    currentDate[0] }}年{
   {
    currentDate[1] }}月</view>
      <block v-if="changeMonth">
        <view class="fu-arrow single fu-right fu-flex fu-justify-between fu-align-center" @click="nextMonth">
          <text class="iconfont icon-jiantouyou" :style="[maColor]"></text>
        </view>
      </block>
      <block v-if="changeYear">
        <view class="fu-arrow fu-flex fu-right fu-justify-between fu-align-center" @click="nextYear">
          <text class="iconfont icon-changyongicon-" :style="[yaColor]"></text>
        </view>
      </block>
    </view>
    <!-- 日历选择 end -->
    <!-- 星期 start -->
    <view class="fu-week fu-flex fu-justify-between fu-align-center fu-text-333 fu-height-72">
      <view class="fu-week-item fu-text-center" v-for="item in weekData" :key="item">{
   {
    item }}</view>
    </view>
    <!-- 星期 end -->
    <!-- 日历 start -->
    <view class="fu-calendar fu-flex fu-justify-between fu-align-center fu-flex-wrap fu-text-333">
      <!-- mode == date || mode == range -->
      <view
        class="fu-calendar-item  fu-text-center"
        @click="changeCalendar(item, index)"
        :class="{ isNot: item.isNot, isFuture: item.isFuture && !item.isNot }"
        v-for="(item, index) in calendar"
        :key="index"
      >
        <view
          class="fu-calendar-num fu-flex fu-justify-center fu-align-center"
          :class="{ signin: mode == 'signin', range: mode == 'range', start: item.start, end: item.end }"
          :style="[(item.dayActive || item.start || item.end) && !item.isNot ? dayBg : {}, item.active && !item.isNot ? activeBg : {}]"
        >
          {
   {
    item.day }}
          <view class="fu-calendar-text" v-show="item.start">{
   {
    startText }}</view>
          <view class="fu-calendar-text" v-show="item.end">{
   {
    endText }}</view>
        </view>
      </view>
    </view>
    <!-- 日历 end -->
  </view>
</template>

<script>
/**
 * @author 邓东方
 */
export default {
   
  props: {
   
    // 月份切换按钮箭头颜色
    'month-arrow-color':{
   
      type: String,
      default: '#666666'
    },
    // 年份切换按钮箭头颜色
    'year-arrow-color':{
   
      type: String,
      default: '#999999'
    },
    // 是否显示顶部年月
    'change-title': {
   
      type: Boolean,
      default: true
    },
    // 是否显示顶部的切换年份方向的按钮
    'change-year': {
   
      type: Boolean,
      default: true
    },
    // 是否显示顶部的切换月份方向的按钮
    'change-month': {
   
      type: Boolean,
      default: true
    },
    // 日期模式 date 单个日期选择模式  range 日期段选择模式  signin 签到日期展示模式
    mode: {
   
      type: String,
      default: 'date'
    },
    // 未来日期是否可选择 默认不可选择
    future: {
   
      type: Boolean,
      default: false
    },
    // 日期段回显时 若只传入一个日期则不显示
    //日期段选择时默认显示开始时间
    'start-time': {
   
      type: String,
      default: ''
    },
    //日期段选择时默认显示结束时间
    'end-time': {
   
      type: String,
      default: ''
    },
    // 起始日期底部的提示文字
    'start-text': {
   
      type: String,
      default: '开始'
    },
    // 结束日期底部的提示文字
    'end-text': {
   
      type: String,
      default: '结束'
    },
    // 选择日期开始结束当天背景色
    'active-bg-color': {
   
      type: String,
      default: 'rgba(41,121,255,1)'
    },
    // 选择日期中间的背景色
    'range-bg-color': {
   
      type: String,
      default: 'rgba(41,121,255,0.13)'
    },
    // 当前日期是否高亮
    isDefaultDay: {
   
      type: Boolean,
      default: true
    },
    // 单个日期选择默认选中时间 xxxx-yy-dd
    currenTime: {
   
      type: String,
      default: ''
    },
    // 签到模式数据 [xxxx-yy-dd]
    signinData: {
   
      type: Array,
      default: function() {
   
        return [];
      }
    }
  },
  data() {
   
    return {
   
      weekData: ['日', '一', '二', '三', '四', '五', '六'], //星期
      calendar: [], //日历数组
      currentDate: [], //当前日期
      currentDay: '', //当天时间
      start: '', //开始时间
      end: '', //结束时间
      isEmit: true //mode == range是否推送
    };
  },
  computed: {
   
    // 背景色
    dayBg() {
   
      return {
    background: this.activeBgColor,