季度组件，基于element-ui封装

项目中有时候需要使用季度组件，遗憾的是，element-ui竟然没有。因此基于element-ui，自己封装了一个季度组件，可以直接复制使用。

创建一个 quarter.vue文件，代码如下：

<template>
  <el-form>
    <el-form-item>
      <mark class="_mark" v-show="showQuarter" @click.stop="showQuarter = false"></mark>
      <el-input placeholder="请选择季度" v-model="showValue" size="small" clearable style="width:220px;"
        @focus="showQuarter = true" @clear="clear">
        <i slot="prefix" class="el-input__icon el-icon-date"></i>
      </el-input>
      <el-card class="box-card" v-show="showQuarter">
        <div slot="header" class="clearfix yearBtn">
          <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="custom-body">
          <div v-for="(item) in quarterData" :key="item.value" class="custom-body-item"
            :class="active == item.value ? 'activeClass1' : 'activeClass2'">
            <span type="text" class="text" @click="selectQuarter(item.value)">{{ item.text }}</span>
          </div>
        </div>
      </el-card>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    valueArr: {
      default: () => {
        return ["01-03", "04-06", "07-09", "10-12"];
      },
      type: Array,
    },
    getValue: {
      default: () => { },
      type: Function,
    },
    defaultValue: {
      default: "",
      type: String,
    },
    value: String,
  },
  model: {
    event: 'handleQuarter',
  },
  data() {
    return {
      showQuarter: true,
      year: new Date().getFullYear(),
      showValue: "",
      active: -1,
      quarterData: [
        { value: '0', text: '第一季度' },
        { value: '1', text: '第二季度' },
        { value: '2', text: '第三季度' },
        { value: '3', text: '第四季度' },
      ],
    };
  },
  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(value) {
      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}季度`;
    },
    value(value) {
      if (!value) {
        this.showValue = ''
        this.active = -1
      }
    },
  },
  methods: {
    prev() {
      this.year = this.year * 1 - 1;
    },
    next() {
      this.year = this.year * 1 + 1;
    },
    selectQuarter(i) {
      this.active = i;
      const quarter = Number(i) + 1;
      let arr = this.valueArr[i].split("-");
      this.getValue(this.year + arr[0] + "-" + this.year + arr[1]);
      this.showQuarter = false;
      const quarterText = {
        1: '一',
        2: '二',
        3: '三',
        4: '四',
      }
      this.showValue = `${this.year}年第${quarterText[quarter]}季度`;
      this.$emit('handleQuarter', `${this.year}-${quarter}`);
    },
    getLastDay(year, month) {
      var new_year = year; //取当前的年份
      var new_month = month++; //取下一个月的第一天，方便计算（最后一天不固定）
      if (month > 12) {
        new_month -= 12; //月份减
        new_year++; //年份增
      }
      var new_date = new Date(new_year, new_month, 1); //取当年当月中的第一天
      return new Date(new_date.getTime() - 1000 * 60 * 60 * 24).getDate(); //获取当月最后一天日期
    },
    clear() {
      this.showValue = ''
      this.active = -1
      this.$emit("handleQuarter", this.showValue);
    },
  },
};

</script>

<style scoped>
._mark {

  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 999;
}

.yearBtn {
  text-align: center;
  padding: 0;
}

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

.custom-body {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.custom-body-item {
  width: 135px;
}

.custom-body-item .text:hover {
  color: #409eff;
  cursor: pointer;
}

.activeClass1 {
  color: #409eff;
}

.activeClass2 {
  color: #606266;
}</style>

使用：

<template>
  <div>
    <quarter-date v-model="quarter"></quarter-date>
  </div>
</template>

<script>
import QuarterDate from './quarterDate.vue'
export default {
  data() {
    return {
      quarter: '',
    }
  },
  components: {
    QuarterDate
  }
}
</script>

效果：