Vue自定义季度选择框控件

项目需求要有季度选择控件，由于ElementUI没有该控件，需要自己封装。

实现效果：

实现思路：

        el-popover结合el-input实现季度框的显示和隐藏，table表格形式显示四个季度，上一年和下一年事件分别将当前年进行减和加操作。

实现代码：

    <div>
        <div
                class="mask-wrapper"
                v-show="showSeason"
                @click.stop="showSeason = false"
        ></div>
        <el-popover placement="bottom" popper-class="quarter-popover-custom" trigger="manual" v-model="showSeason">

            <div class="season-picker-box">
                <div class="el-date-picker__header el-date-picker__header--bordered">
                    <i
                            aria-label="前一年"
                            class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
                            @click="prev"
                    />
                    <span role="button" class="el-date-picker__header-label" >{{ year }}年</span>
                    <i
                            aria-label="后一年"
                            @click="next"
                            class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
                    />
                </div>

                <div class="el-picker-panel__content">
                    <table class="el-month-table">
                        <tr>
                            <td :class="{'today': current === 1}">
                                <div>
                                    <a class="cell" @click="selectSeason(1)">一季度</a>
                                </div>
                            </td>
                            <td :class="{'today': current === 2}">
                                <div>
                                    <a class="cell" @click="selectSeason(2)">二季度</a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td :class="{'today': current === 3}">
                                <div>
                                    <a class="cell" @click="selectSeason(3)">三季度</a>
                                </div>
                            </td>
                            <td :class="{'today': current === 4}">
                                <div>
                                    <a class="cell" @click="selectSeason(4)">四季度</a>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <el-input
                    slot="reference"
                    placeholder="请选择季度"
                    v-model="strValue"
                    style="width: 12rem"
                    prefix-icon="el-icon-date"
                    @focus="showSeason = true"
            />
        </el-popover>
    </div>

         model: {
            prop: 'quarterValue',
            event: 'quarterChange'
         },
         props: {
            quarterValue: '',
            resetvalue:""
         },

         data() {
            return {
                showSeason: false,
                year: new Date().getFullYear(),
                strValue: '',
                current: ''
            };
         },

         watch: {
            showSeason(val) {
                if (val) {
                   this.current = this.quarterValue ? Number(this.quarterValue.split('-')[1]) : ''
                }
            },
        },

        methods: {
            resetfn(){
                this.strValue=''
            },
            prev() {
                this.year = this.year * 1 - 1;
            },

            next() {
                this.year = this.year * 1 + 1;
            },

            selectSeason(i) {
                this.season = `${this.year}-${i}`;
                this.$emit('quarterChange', this.season);
                this.showSeason = false;
                const cnNum = ['一', '二', '三', '四']
                this.strValue = `${this.year}年${cnNum[i-1]}季度`;
            }
        },

<style lang="scss" scoped>
    .quarter-popover-custom {
        padding: 0;
        width: 12rem !important;
    }
    .mask-wrapper {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0);
        z-index: 999;
    }

    .season-picker-box {
        margin-bottom: 0;
        border-bottom: 1px solid #ebeef5;
        .el-month-table {
            width: 100%;
        }
        .el-month-table td .cell {
            width: 80px;
        }
    }

    .box-card {
        width: 240px;
        padding: 0 3px;
        margin-top: 10px;
        position: fixed;
        z-index: 9999;

        .item {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .el-button {
                width: 80px;
                margin: 5px;
                color: #606266;
                &:hover {
                    color: #3498db;
                }
            }
        }
    }
</style>

引入组件：

组件赋值：