【关于vue3.0 基于Element-plus封装的季度选择器组件】

来源

工作需要季度选择器，在网上找了很多，依照该大佬的博文，改动少许自用，将代码记录一下，以后取用方便
引用自页面原文

上正文

<!-- 
    季度选择组件
    value/v-model 绑定值
    format 显示在输入框中的值的格式，引入季度：q（阿拉伯数字）、Q（中文数字）YYYY年第Q/q季度
    placeholder 占位内容
    value-format/valueFormat 绑定值的格式，不指定则为Date对象，格式包含YYYYMM、YYYYMm、YYYYmm、YYYYQQ、YYYYqq、YYYYQ、YYYYq
    其中 
    YYYYMM：绑定值为每季度的第一月，例如2023年第一季度：202301，2023年第二季度：202304，2023年第三季度：202307,2023年第四季度：202310
    YYYYMm：绑定值为每季度的中间月，例如2023年第一季度：202302, 2023年第二季度：202305，2023年第三季度：202308,2023年第四季度：202311
    YYYYmm：绑定值为每季度的最后月，例如2023年第一季度：202303, 2023年第二季度：202306，2023年第三季度：202309,2023年第四季度：202312
    YYYYQQ/YYYYqq：绑定值为季度，例如2023年第一季度：202301,2023年第二季度：202302，2023年第三季度：202303,2023年第四季度：202304
    YYYYQ/YYYYq：绑定值为季度，例如2023年第一季度：20231,2023年第二季度：20232，2023年第三季度：20233,2023年第四季度：20234
    使用示例
    import QuarterPicker from '@/components/quarter-picker'
        const range = ref({
   
            quarter: '202401'
        })
    QuarterPicker ref="quarterValue" format="YYYY年第q季度" value-format="YYYYQQ" :disabled-date="disabledQuarter"
                    @change="handleChangeQuarter" v-model="range.quarter" />
 -->
<template>
    <ElPopover ref="quarterPopover" :visible="pickerVisible" trigger="click" popper-class="quarter-popover el-date-picker"
        transition="el-zoom-in-top" :width="width">
        <template #reference>
            <ElInput class="el-date-editor" :prefix-icon="Calendar" :clearable="clearable" v-model="displayValue"
                :placeholder="placeholder" @click="pickerVisible = true" @clear="clearModelValue">
            </ElInput>
        </template>
        <div v-click-outside="closePopover" class="el-date-picker">
            <div class="el-date-picker__header el-date-picker__header--bordered">
                <span role="button" class="el-date-picker__prev-btn">
                    <button type="button" aria-label="前一年" class="el-picker-panel__icon-btn" @click="getPrevYear">
                        <ElIcon>
                            <DArrowLeft />
                        </ElIcon>
                    </button>
                </span>
                <span role="button" class="el-date-picker__header-label">{
   {
    year }}年</span>
                <span role="button" class="el-date-picker__next-btn">
                    <button type="button" aria-label="后一年" class="el-picker-panel__icon-btn" @click="getNextYear">
                        <ElIcon>
                            <DArrowRight />
                        </ElIcon>
                    </button>
                </span>
            </div>
            <div class="el-picker-panel__content" style="margin: 10px 15px">
                <table class="quarter-table" @click="handleTableClick">
                    <tbody>
                        <tr>
                            <td class="available" :class="getCellStyle(0)">
                                <a class="cell">第一季度</a>
                            </td>
                            <td class="available" :class="getCellStyle(1)">
                                <a class="cell">第二季度</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="available" :class="getCellStyle(2)">
                                <a class="cell">第三季度</a>
                            </td>
                            <td class="available" :class="getCellStyle(3)">
                                <a class="cell">第四季度</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </ElPopover>
<