vue3+eleement plus日历选择季度

<template><div class="el-quarter-wrap"><el-popover width="280" v-model="visible"><template #reference><el-input v-model="quarterDate" placeholder="请选择季度" clearable :prefix-icon="Calendar" readonly@change="quarterDateChange" style="width: 300px;"><template #suffix><el-icon v-if="quarterDate" class="el-quarter-clear" @click="clearData"><Close /></el-icon></template></el-input></template><div class="el-quarter__header"><span class="el-quarter-btn el-quarter-btn__pre" @click="changeShowYear(-1)"><el-icon><DArrowLeft /></el-icon></span><div class="el-quarter__header-text" @click="showYearList">{{ quarterTitle }}</div><span class="el-quarter-btn el-quarter-btn__next" @click="changeShowYear(1)"><el-icon><DArrowRight /></el-icon></span></div><div class="el-quarter__content" v-if="!isEditYear"><div class="el-quarter__row"><span class="quarter-index" :class="{ 'is-active': showYear === pickerYear && quarterIndex === index }" @click="pickerQuarte(index)"v-for="(item, index) in ['第一季度', '第二季度','第三季度','第四季度',]">{{ item }}</span></div></div><div class="el-year__content" v-else><div class="el-year-item" v-for="item in yearList"><div class="cell" :class="{ 'is-active': showYear == item }" @click="selectYear(item)">{{ item }}</div></div></div></el-popover></div></template><script lang="ts" setup>import { DArrowLeft, DArrowRight, Close, Calendar } from '@element-plus/icons-vue'import { computed, onMounted, reactive, ref } from 'vue'let visible = ref(false)let quarterDate = ref('')let pickerYear = ref('') as anylet showYear = ref('') as anylet quarterIndex = ref(-1)let isEditYear = ref(false)let startYear = ref('') as anylet yearList = reactive([] as any)const quarterTitle = computed(() => {if(isEditYear.value) {return startYear.value+ "年 - " + (startYear.value + 9) + "年"} else {return showYear.value + '年'}})function pickerQuarte(index:number) {quarterIndex.value = indexpickerYear.value = showYear.valuequarterDate.value = pickerYear.value + "-Q" + index}function changeShowYear(num: number) {if(isEditYear.value) {startYear.value = startYear.value + (num * 10)changeYearList()} else {showYear.value = showYear.value + num}}function clearData() {quarterDate.value = ''pickerYear.value = ''showYear.value = new Date().getFullYear()quarterIndex.value = 0}function quarterDateChange(value:any) {const splitArray = value.split('-Q')if (splitArray.length < 2) {pickerYear.value = ''showYear.value = new Date().getFullYear()quarterIndex.value = 0} else {pickerYear.value = splitArray[0]showYear.value = splitArray[0]quarterIndex.value = splitArray[1]}}function changeYearList() {yearList = []let year = startYear.valuefor (let i = 0; i < 10; i++) {yearList.push(year++)}}function showYearList() {if(!isEditYear.value) {startYear.value = Number(Math.floor(showYear.value / 10) + '0')changeYearList()isEditYear.value = true} else {isEditYear.value = false}}function selectYear(item:any) {showYear.value = itemisEditYear.value = false}onMounted(() => {showYear.value = new Date().getFullYear()startYear.value = Number(Math.floor(showYear.value / 10) + '0')changeYearList()})</script><style lang="scss">.el-quarter__header {padding-bottom: 12px;border-bottom: 1px solid #ebeef5;display: flex;align-items: center;justify-content: space-between;.el-quarter-btn {font-size: 12px;}.el-quarter__header-text {font-size: 16px;font-weight: 500;text-align: center;cursor: pointer;}}.el-quarter__content {min-height: 60px;box-sizing: border-box;display: flex;flex-direction: column;justify-content: space-around;.el-quarter__row {display: flex;justify-content: space-around;flex-wrap: wrap;.quarter-index {display: block;padding: 4px 10px;width: 50%;text-align: center;cursor: pointer;&:hover {color: #337ecc}}.is-active {color: #409eff}}}.el-quarter-clear {position: relative;color: #909399;display: none;height: 12px;width: 12px;cursor: pointer;&::after {content: '';position: absolute;height: 14px;width: 14px;margin: auto;border-radius: 50%;border: 1px solid #909399}}.el-input {&:hover {.el-quarter-clear {display: flex;}}}.el-year__content {min-height: 100px;display: flex;padding: 10px 0;flex-wrap: wrap;.el-year-item {width: calc(100% / 4);display: flex;align-items: center;justify-content: center;.cell {padding: 4px 10px;width: fit-content;cursor: pointer;cursor: pointer;white-space: nowrap;&:hover {color: #337ecc}}.is-active {color: #409eff}}}</style>