VUE 3 TS 自定义 Calendar 日历 可以点击选择 和 滑动选择日期 夸月选择

最近项目中需要一个可以自由选择日期的空间，在网上找了很久都没有适合的可用，索性自己写了一个，看代码。 可以滑动选择和点击选择  竖向点击星期几选择

<template>
    <el-button type="primary" @click="ClickReset" >重置</el-button>
  <el-button type="primary" @click="isShow=!isShow" >显示价格</el-button>
    <div class="flex-wrap text-primary"  @mouseup="Mouseup">
      <div v-for="month in monthlist" :key="month"  class="calendar-month mt-24 ml-16">
        <div class="pb-8 text-14 text-center">{{ month.date }}</div>
        <ul class="flex-wrap text-sub">
          <li class="text-tip" @click="ClickWeek(month,0)">日</li>
          <li class="text-tip" @click="ClickWeek(month,1)">一</li>
          <li class="text-tip" @click="ClickWeek(month,2)">二</li>
          <li class="text-tip" @click="ClickWeek(month,3)">三</li>
          <li class="text-tip" @click="ClickWeek(month,4)">四</li>
          <li class="text-tip" @click="ClickWeek(month,5)">五</li>
          <li class="text-tip" @click="ClickWeek(month,6)">六</li>

          <li v-for="item in month.week" :key="item" data-id="">
            <div></div>
          </li>

          <li v-for="item in month.days" :key="item" :data-id="item.date"
              @click="ClickItem(item)"
              @mousedown="Mousedown(item)"
              @mouseover="Mouseover(item)"
              @mouseup="Mouseup">
            <div class="relative" :class="{'isHover':item.hover,'isSelected':item.selected}" >
              <p class="">{{ item.day }}</p>
              <span v-show="isShow" class="absolute color-red">{{item.price}}</span>
            </div>
          </li>

        </ul>
      </div>
    </div>
</template>

<script lang="ts" setup>

import {onMounted, ref} from "vue";
import moment from "moment";


interface Month {
  date: string,
  days:Day[],
  week:number,
}

interface Day {
  date: string,
  week:number,
  day: string,
  hover: boolean,
  selected: boolean,
  price:string,
}

const isShow= ref(false);
const monthlist=ref<Month[]>([]);

onMounted(()=>{

  console.log('onMounted')

  for (let i = 0; i < 6; i++) {
    let firstdate = moment().add(i,'month').startOf('month');
    let enddate = moment().add(i,'month').endOf('month');
    let date = firstdate.toDate();
    let days:Day[] = [];
    for (let j = 0; j < enddate.diff(date,'days')+1; j++) {
      let date1 = moment(date).add(j,'day').toDate();
      days.push({
        date: moment(date1).format('YYYY-MM-DD'),
        week:moment(date1).day(),
        day: moment(date1).date()+'',
        hover:false,
        selected: false,
        price:'￥2000'
      })
    }

    monthlist.value.push({
          date: firstdate.format('YYYY 年 MM 月'),
          days:days,
          week:firstdate.day(),
        }
    );
  }

  console.log(monthlist);

})

const ClickItem = (day:Day) => {
  day.selected=!day.selected;
}

let date_begin = ''
const Mousedown = (day:Day) => {
  date_begin=day.date;
}

const Mouseover = (day:Day) => {
  if(date_begin!='')
  {
    for (let i = 0; i < monthlist.value.length; i++) {
      for (let j = 0; j < monthlist.value[i].days.length; j++) {
        let day1 = monthlist.value[i].days[j];
        if((day1.date >= day.date && day1.date <= date_begin)||(day1.date <= day.date && day1.date >= date_begin)){
          day1.hover=true;
        }else {
          day1.hover=false;
        }
      }
    }
  }
}
const Mouseup = ()  => {
  date_begin = ''
  for (let i = 0; i < monthlist.value.length; i++) {
    for (let j = 0; j < monthlist.value[i].days.length; j++) {
      let day1 = monthlist.value[i].days[j];
      if(day1.selected && day1.hover){
        day1.selected=false;
        day1.hover=false;
      }else if(!day1.selected &&day1.hover){
        day1.selected=true;
        day1.hover=false;
      }
    }
  }
}

const ClickWeek = (month:Month,week:number) => {
  for (let j = 0; j < month.days.length; j++) {
    if(month.days[j].week===week){
      month.days[j].selected=!month.days[j].selected;
    }
  }
}


const ClickReset = () => {
  for (let i = 0; i < monthlist.value.length; i++) {
    for (let j = 0; j < monthlist.value[i].days.length; j++) {
      let day1 = monthlist.value[i].days[j];
      day1.selected=false;
      day1.hover=false;
    }
  }
}

</script>

<style scoped lang="scss">

ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}

li {
  display: list-item;
  text-align: -webkit-match-parent;
}

ol, ul {
  list-style: none;
}

body,   div, li,   p,   ul {
  margin: 0;
  padding: 0;
}
div {
  display: block;
}


.flex-wrap{
  flex-wrap: wrap;
  display: flex;
}

.mt-24 {
  margin-top: 24px;
}

.ml-16 {
  margin-left: 16px;
}

.text-primary {
  color: #333;
}

.text-primary, .text-sub, .text-tip {
  line-height: 1.5;
}

.text-center {
  text-align: center;
}

.text-14  {
  font-size: 14px;
  line-height: 1.5;
}

.pb-8 {
  padding-bottom: 8px;
}


.text-sub {
  color: #666;
}

.text-tip {
  background-color: #f5f7fa;
  color: #999;
}

.color-red {
  color: #f5222d;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}


.calendar-month{
  border: 1px solid #d0d0d0;
}

.calendar-month ul {
  width: 252px;
  padding: 1px;
}

.calendar-month li {
  text-align: center;
  width: 36px;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  //border: 1px dashed #8c939d;
}
.calendar-month li span {
  font-size: 8px;
  bottom: -12px;
  left: -2px;
  text-align: center;
  transform: scale(.6);
}
.calendar-month .isSelected {
  background: #b3c8ff;
  color: #162d53;
}
.calendar-month .isHover {
  background: #6f90e0 !important;
  color: #fff!important;
}
.calendar-month .isOver {
  background-color: #f0f0f0;
  color: #999;
}
//.calendar-month li:nth-of-type(7n), .calendar-month li:nth-of-type(7n - 1) {
//  background: #f5f7fa;
//}
//.calendar-month li:hover{
//  background-color: #f0f0f0;
//  color: #999;
//}
</style>