基于Element-UI封装的季度插件

组件封装的代码：

<template>
  <div class="time_quarter">
    <!-- <div class="time_box"></div> -->
    <slot>日期：</slot>

    <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="请选择季度" size='small' v-model="showValue" style="160px;" @focus="showSeason=true"> -->
    <el-input placeholder="请选择季度" size='small' v-model="showValue" style="140px;" class="elWidth" @focus="showSeason=true">
      <i slot="prefix" class="el-input__icon el-icon-date"></i>
    </el-input>
    <!-- <el-card class="box-card" style="322px;padding: 0 3px 20px;margin-top:10px;position:fixed;z-index:9999" v-show="showSeason"> -->
    <!-- style="200px;padding: 0 3px 20px;margin-top:10px;position:fixed;z-index:9999" -->
    <el-card class="box-card" v-show="showSeason">
      <div slot="header" class="clearfix" style="text-align:center;padding:0">
        <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="{notallow:year==limitTime}" class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"></button>
      </div>
      <div class="text item" style="text-align:center;">
        <el-button type="text" size="medium" style="40%;color: #606266;float:left;" @click="selectSeason(0)">第一季度</el-button>
        <el-button type="text" size="medium" style="float:right;40%;color: #606266;" @click="selectSeason(1)">第二季度</el-button>
      </div>
      <div class="text item" style="text-align:center;">
        <el-button type="text" size="medium" style="40%;color: #606266;float:left;" @click="selectSeason(2)">第三季度</el-button>
        <el-button type="text" size="medium" style="float:right;40%;color: #606266;" @click="selectSeason(3)">第四季度</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
/**
 * @file:  View 组件 季节选择控件
 * @author: v_zhuchun
 * @date: 2019-05-23
 * @description: UI组件  可选择季节
 * @api: valueArr : 季度value defalut['01-03', '04-06', '07-09', '10-12'] 默认值待设置
 */
export default {
  props: {
    valueArr: {
      default: () => {
        return ["12-02", "03-05", "06-08", "09-11"];
      },
      type: Array,
    },
    getValue: {
      default: () => {},
      type: Function,
    },
    // 传入显示的时间
    defaultValue: {
      default: "",
      type: String,
    },
    // 限制的时间
    limitTime: {
      type: String,
      default: "",
      require: true,
    },
  },
  data() {
    return {
      showSeason: false,
      season: "",
      year: new Date().getFullYear(),
      showValue: "",
    };
  },
  computed: {},
  created() {
    if (this.defaultValue) {
      let value = this.defaultValue;
      let arr = value.split("-");
      this.year = arr[0].slice(0, 4);
   
      var myseason = arr[1];
      this.showValue = `${this.year}年${this.whitchQuarter(myseason)}季度`;
      //   this.showValue = `${this.year}年${arrAll.indexOf(str) + 1}季度`;
    }
    console.log("whitchQuarter", this.whitchQuarter(10));
  },
  watch: {
    defaultValue: function (value, oldValue) {
      let arr = value.split("-");
      this.year = arr[0].slice(0, 4);
    
      var myseason = arr[1];
      //   this.showValue = `${this.year}年${arrAll.indexOf(str) + 1}季度`;
      this.showValue = `${this.year}年${this.whitchQuarter(myseason)}季度`;
    },
  },
  methods: {
    // 根据输入的月份判断是哪一个季节
    whitchQuarter(month) {
      let quarter = "";
      month = Number(month);
      switch (month) {
        case 12:
        case 1:
        case 2:
          quarter = "4";
          break;
        case 3:
        case 4:
        case 5:
          quarter = "1";
          break;
        case 6:
        case 7:
        case 8:
          quarter = "2";

          break;
        case 9:
        case 10:
        case 11:
          quarter = "3";
          break;
        default:
          console.error("The entered time is incorrect");
      }
      return quarter;
    },
    one() {
      this.showSeason = false;
    },
    prev() {
      this.year = this.year * 1 - 1;
    },
    next() {
      // 如果有时间限制的话会进行判断
      if (this.limitTime == "") {
        this.year = this.year * 1 + 1;
      } else if (this.limitTime != "" && this.year < this.limitTime) {
        this.year = this.year * 1 + 1;
      }
    },
    // 季度时间判定
    InitialTime(val) {
      let num = "";
      val = Number(val);
      switch (val) {
        case 1:
          num = "03";
          break;
        case 2:
          num = "06";
          break;
        case 3:
          num = "09";
          break;
        case 4:
          num = "12";
          break;
        default:
          console.error("时间格式有误！");
      }
      return num;
    },

    selectSeason(i) {
      let that = this;
      that.season = i + 1;
      let arr = that.valueArr[i].split("-");
      that.getValue(that.year + arr[0] + "-" + that.year + arr[1]);
      that.showSeason = false;
      this.showValue = `${this.year}年${this.season}季度`;
      var formatValue = `${this.year}-${this.InitialTime(this.season)}`;
      this.$emit("getTime", formatValue);
    },
    //
  },
};
</script>
<style lang="less">
.notallow {
  cursor: not-allowed;
}
.time_box {
  position: relative;
}
.box-card {
  position: absolute;
  top: 40px;
  left: 22px;
  padding: 0 3px 20px;
  z-index: 9999;
}
// .elWidth {
//    120px !important;
// }
.time_quarter {
   100%;
  .el-input--small .el-input__inner {
     82%;
  }
}
</style>

封装组件使用：