element-ui，日期组件按季度筛选

<template>
    <!-- 季度选择时间控件 -->
    <div class="jidudatepicker">
        <span>
            <mark
                style="position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);z-index:999;"
                v-show="showSeason"
                @click.stop="showSeason=false"
            ></mark>
            <el-input
                placeholder="选择季度"
                v-model="showValue"
                @focus="showSeason=true"
            >
                <i slot="prefix" class="el-input__icon el-icon-date"></i>
            </el-input>
            <el-card
                class="box-card"
                style="width:322px;padding: 0 3px 20px;margin-top:10px;position:fixed;z-index:9999"
                v-show="showSeason"
            >
                <div slot="header" class="firstBtn">
                    <button
                        type="button"
                        aria-label="前一年"
                        class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
                        @click="prev"
                    ></button>
                    <span role="button" class="el-date-picker__header-label">{{year}}年</span>
                    <button
                        type="button"
                        aria-label="后一年"
                        @click="next"
                        class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
                    ></button>
                </div>
                <div class="text">
                    <!-- 如下，绑定class,disabled为禁止选择的时间的设置 -->
                    <el-button
                        type="text"
                        size="medium"
                        :class="{'colorDis': (this.seasonMonth < 1 && this.year >= this.defaultyear) || this.year > this.defaultyear}"
                        :disabled="(this.seasonMonth < 1 && this.year >= this.defaultyear) || this.year > this.defaultyear"
                        style="width:47%;color: #606266;float:left;"
                        @click="selectSeason(1)"
                    >第一季度</el-button>
                    <el-button
                        type="text"
                        size="medium"
                        :class="{'colorDis': (this.seasonMonth < 2 && this.year >= this.defaultyear) || this.year > this.defaultyear}"
                        :disabled="(this.seasonMonth < 2 && this.year >= this.defaultyear) || this.year > this.defaultyear"
                        style="float:right;width:47%;color: #606266;"
                        @click="selectSeason(2)"
                    >第二季度</el-button>
                </div>
                <div class="item" style="text-align:center;">
                    <el-button
                        type="text"
                        size="medium"
                        :class="{'colorDis': (this.seasonMonth < 3 && this.year >= this.defaultyear) || this.year > this.defaultyear}"
                        :disabled="(this.seasonMonth < 3 && this.year >= this.defaultyear) || this.year > this.defaultyear"
                        style="width:47%;color: #606266;float:left;"
                        @click="selectSeason(3)"
                    >第三季度</el-button>
                    <el-button
                        type="text"
                        size="medium"
                        :class="{'colorDis': (this.seasonMonth < 4 && this.year >= this.defaultyear) || this.year > this.defaultyear}"
                        :disabled="(this.seasonMonth < 4 && this.year >= this.defaultyear) || this.year > this.defaultyear"
                        style="float:right;width:47%;color: #606266;"
                        @click="selectSeason(4)"
                    >第四季度</el-button>
                </div>
            </el-card>
        </span>
    </div>
</template>
<script>
export default {
    name: 'jududatepicker',
    props: {
        valueArr: {
            default: () => {
                return ['01-03', '04-06', '07-09', '10-12']
            },
            type: Array
        },
        getValue: {
            default: val => {
                return val
            },
            type: Function
        }
        // defaultValue: {
        //   // 默认值 201904-201906
        //   default: '',
        //   type: String
        // }
    },
    data() {
        return {
            showSeason: false,
            season: '',
            year: new Date().getFullYear(), // input显示时间，会随着用户操作改变
            defaultyear: new Date().getFullYear(), // 当前年份，不变
            month: new Date().getMonth() + 1, // 当前月份，不变
            showValue: '',
            seasonMonth: '',
            beforeyear: null // 默认显示上一季度所用时间，可能是去年
        }
    },
    created() {
        // if (this.defaultValue) {
        //   let value = this.defaultValue
        //   let arr = value.split('-')
        //   this.year = arr[0].slice(0, 4)
        //   let str = arr[0].slice(4, 6) + '-' + arr[1].slice(4, 6)
        //   let arrAll = this.valueArr
        //   // valueArr ['01-03', '04-06', '07-09', '10-12']
        //   this.showValue = `${this.year} 年 ${arrAll.indexOf(str) + 1} 季度`
        // }
    },
    mounted() {
        // 每次挂在时都对组件进行重置，那么就不需要在上级组件中进行重置
        this.getDefaultTime()
    },
    watch: {
        // defaultValue: function(value, oldValue) {
        //   let arr = value.split('-')
        //   this.year = arr[0].slice(0, 4)
        //   let str = arr[0].slice(4, 6) + '-' + arr[1].slice(4, 6)
        //   let arrAll = this.valueArr
        //   // valueArr ['01-03', '04-06', '07-09', '10-12']
        //   this.showValue = `${this.year} 年 ${arrAll.indexOf(str) + 1} 季度`
        // }
    },
    methods: {
        one() {
            this.showSeason = false
        },
        prev() {
            this.year = this.year * 1 - 1
        },
        next() {
            this.year = this.year * 1 + 1
        },
        selectSeason(i) {
            let that = this
            that.season = i
            // 为区别月份对待，这里返回：yyyy-Q e: 2020-1
            let seasonValue = that.getValue(that.year + '-' + that.season)
            that.showSeason = false
            this.showValue = `${this.year} 年 ${this.season} 季度`
            // 每次选择时间都将当前选择时间发送到父组件
            that.$emit('chooseSeason', seasonValue)
        },
        reset() {
            // 季度重置 当前季度
            this.getDefaultTime()
        },
        getDefaultTime() {
            // 获取默认的上一个季度
            var year = this.defaultyear
            var month = this.month
            var season = null
            if (month <= 3) {
                this.season = 1
                season = 1
                this.beforeyear = year
                this.seasonMonth = 1
            } else if (month > 3 && month <= 6) {
                this.season = 2
                season = 2
                this.beforeyear = year
                this.seasonMonth = 2
            } else if (month > 6 && month <= 9) {
                this.season = 3
                season = 3
                this.beforeyear = year
                this.seasonMonth = 3
            } else if (month > 9 && month <= 12) {
                this.season = 4
                season = 4
                this.beforeyear = year
                this.seasonMonth = 4
            }
            this.showValue = `${year} 年 ${season} 季度`
        }
    }
}
</script>
<style lang="scss" scoped>
    .jidudatepicker {
        display: inline;
        .firstBtn {
            height: 30px;
            line-height: 34px;
            width: 100%;
            text-align: center;
        }
        .text {
            text-align: center;
            margin: 15px 0 10px;
        }
        .item {
            text-align: center;
        }
    }
    .colorDis {
        color: #999 !important;
    }
</style>
<style lang="scss">
    .jidudatepicker {
        .el-card__header {
            padding: 12px;
        }
    }
</style>