vue antdesign自定义季度选择器

直接上代码

注：根据自己项目要求自行修改返回数据格式

<template>
<div>
  日期
  <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>
  <a-input placeholder="请选择季度" v-model="showValue" style="width:138px;" @focus="showSeason=true">
  </a-input>
  <a-card class="box-card" style="width:322px;padding: 0 3px 20px;margin-top:10px;position:fixed;z-index:9999" v-show="showSeason">
    <div class="ant-calendar-month-panel-header">
	<a role="button" title="上一年 (Control键加左方向键)" @click="prev" class="ant-calendar-month-panel-prev-year-btn"></a>
	<a role="button" title="选择年份" class="ant-calendar-month-panel-year-select">
            <span class="ant-calendar-month-panel-year-select-content">{{ year }}年</span>
	</a>
	<a role="button" title="下一年 (Control键加右方向键)" @click="next" class="ant-calendar-month-panel-next-year-btn"></a>
    </div>
    <div class="text item" style="text-align:center;">
      <a-button type="text"  style="width:40%;color: #606266;float:left;margin-top: 30px" @click="selectSeason(0)">第一季度</a-button>
      <a-button type="text"  style="float:right;width:40%;color: #606266;margin-top: 30px" @click="selectSeason(1)">第二季度</a-button>
    </div>
    <div class="text item" style="text-align:center;">
      <a-button type="text"  style="width:40%;color: #606266;float:left;margin-top: 30px" @click="selectSeason(2)">第三季度</a-button>
      <a-button type="text"  style="float:right;width:40%;color: #606266;margin-top: 30px" @click="selectSeason(3)">第四季度</a-button>
    </div>
  </a-card>
</div>
</template>

<script>
export default {
  props: {
    valueArr: {
      default: () => {
        // return ['01-03', '04-06', '07-09', '10-12']
        return ['一季度','二季度','三季度','四季度']
      },
      type: Array
    },
    getValue: {
      default: () => {},
      type: Function
    },
    defaultValue: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      showSeason: false,
      season: '',
      year: new Date().getFullYear(),
      showValue: ''
    }
  },
  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
      this.showValue = `${this.year}年${arrAll.indexOf(str) + 1}季度`
    }
  },
  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
      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 + 1
      /**
       * 新增 2022年01月06日09:33:03
       */
      let quarter = ['一季度','二季度','三季度','四季度']
      let arr = that.valueArr[i].split('-')
      that.getValue({
         year: that.year,
         quarter: i,
         full: that.year + '' + quarter[i]
      })
      that.showSeason = false
      this.showValue = `${this.year}年${this.season}季度`
    }
  }
}
</script>

使用

效果