elementUI 季度选择组件

代码组件：

<template>
  <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: 2.75rem"
        prefix-icon="el-icon-date"
        @focus="showSeason = true"
      />
    </el-popover>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'quarterValue',
    event: 'quarterChange'
  },
  props: {
    quarterValue: ''
  },

  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: {

    prev() {
      this.year = this.year * 1 - 1;
    },

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

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

<style lang="scss">
.quarter-popover-custom {
  padding: 0;
  width: 3rem !important;
}
</style>

<style lang="scss" scoped>
@import '~@/styles/variables.scss';

.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: $themeColor;
      }
    }
  }
}
</style>

运用：

 <quarter-picker v-model="quarterValueStart" />

 结果：

说明：

运用父子组件双向绑定的写法，input内显示和value不同，可根据自己业务场景进行修改