3、點(diǎn)擊具體日期時，確定狀態(tài)

• 使用數(shù)組存起當(dāng)前已選的日期，使用一個變量記錄當(dāng)前半選的日期
• 通過一個函數(shù)isActive給每個日期綁定類名，從而在視圖上顯示出來，同時可以確定狀態(tài)的切換
  • 如果點(diǎn)擊了已選日期的數(shù)據(jù)，需要剔除，改為空白狀態(tài)
  • 如果點(diǎn)擊了半選態(tài)日期，則直接選中當(dāng)前日期，變?yōu)橐堰x日期
  • 如果點(diǎn)擊了空白狀態(tài)日期，則可能有兩種情況，一是已存在半選態(tài)日期，等待閉合，而是不存在半選態(tài)日期，當(dāng)前設(shè)置為半選

methods: {
    // 突出顯示當(dāng)前日期
    isActive(index) {
      const date = new Date()
      const y = date.getFullYear()
      const m = date.getMonth() + 1
      const d = date.getDate()
      const obj = {}

      if (this.year === y && this.month === m && index === d) {
        obj.today = true
      }
      const newIndexStr = index < 10 ? `0${index}` : `${index}`
      const newMonthStr = this.month < 10 ? `0${this.month}` : `${this.month}`
      const item = `${this.year}/${newMonthStr}/${newIndexStr}`
      if (item === this.partialSelect) {
        obj.active = true
      }
      if (this.selctDate.includes(item)) {
        obj.activeRange = true
      }
      return obj
    },
    selectDay(e, type) {
      const iText = e.target.innerText
      const sDate = Number(iText) < 10 ? `0${iText}` : `${iText}`
      if (type === "previousMonth") {
        if (this.month === 1) {
          this.month = 12
          this.reduceYear()
        } else {
          this.month = this.month - 1
        }
      } else if (type === "nextMonth") {
        if (this.month === 12) {
          this.month = 1
          this.addYear()
        } else {
          this.month = this.month + 1
        }
      }

      let arr = this.selctDate.map((i) => new Date(i).getTime())
      const newMonthStr = this.month < 10 ? `0${this.month}` : `${this.month}`
      const curSelectTime = `${this.year}/${newMonthStr}/${sDate}`
      const curSelectTimeStamp = new Date(curSelectTime).getTime()
      const clsName = e.target.className // 通過類名判斷當(dāng)前是什么狀態(tài)
      if (clsName.includes("activeRange")) {
        // 點(diǎn)擊了范圍內(nèi)的數(shù)據(jù)，需要剔除
        arr = arr.filter((i) => i !== curSelectTimeStamp)
      } else if (clsName.includes("active") && !clsName.includes("activeRange")) {
        // 點(diǎn)擊了一個半選狀態(tài)的日期，準(zhǔn)備擴(kuò)展范圍或者單選一個
        if (this.selctDate.length) {
          const itemTime = arr[0]
          const itemTime2 = arr[arr.length - 1]
          const selectTime = curSelectTimeStamp
          if (selectTime < itemTime) {
            console.log("點(diǎn)擊了范圍之前的時間")
          } else if (selectTime > itemTime2) {
            console.log("點(diǎn)擊了范圍之后的時間")
          } else {
            console.log("點(diǎn)擊了范圍內(nèi)的空白，直接加上一個")
          }
          arr = [...arr, curSelectTimeStamp]
          console.log(arr)
        } else {
          // 第一次選擇日期，而且雙擊了，直接單獨(dú)確定這個
          arr = [curSelectTimeStamp]
        }
        // 此時選擇完日前了，半選的日期消費(fèi)掉了，清空
        this.partialSelect = null
      } else {
        console.log("不是半選情況")

        // 即沒有點(diǎn)擊范圍內(nèi)，又不是半選狀態(tài)，可能是已經(jīng)存在一個半選，等待這個日期來閉合范圍，也可能是第一次打開點(diǎn)擊
        if (this.partialSelect) {
          // 需要和已存在的半選態(tài)日期閉合
          const itemTime = new Date(this.partialSelect).getTime()
          const itemTime2 = curSelectTimeStamp
          const timeArr = [itemTime, itemTime2].sort((a, b) => a - b) // 排序，因?yàn)椴恢勒l在前面
          for (let i = timeArr[0]; i <= timeArr[1]; i += 86400000) {
            arr.push(i)
          }
          // 此時確定好范圍了，半選的日期消費(fèi)掉了，清空
          this.partialSelect = null
        } else if (this.selctDate.length) {
          // 存在一個范圍，同時點(diǎn)擊范圍外，此時設(shè)置半選
          this.day = sDate
          this.partialSelect = curSelectTime
        } else {
          // 不存在一個范圍，所以是第一次點(diǎn)擊
          this.day = sDate
          this.partialSelect = curSelectTime
        }
      }
      let filterArr = Array.from(new Set(arr))
      filterArr = filterArr.sort((a, b) => a - b)
      this.selctDate = filterArr.map((i) => this.formatTime(new Date(i)))
      this.$emit("input", this.selctDate)
      this.$emit("change", this.selctDate)
      this.day = parseInt(sDate)
    },
}