仿真elementUI的时间选择的季度选择

<template>
  <div class="quarter">
    <div class="input-wrap" id="closeId" @mouseover="handler" @click.stop="btn" :style="{color:colorItem}"><i class="el-icon-date"></i>{{seasonValue}}<i class="el-icon-circle-close" :style="{display:displayShow}" @click.stop="close"></i></div>
    <div v-show="showSeason" ref="shows" class="pop">
      <template>
        <div class="card-header">
          <div class="el-icon-d-arrow-left" @click="prev" style="width: 16px;cursor: pointer;"></div>
          <span class="text-year" style="text-align:center">{{year}}年</span>
          <div class="el-icon-d-arrow-right" @click="next" style="width: 16px;cursor: pointer;"></div>
        </div>
      </template>
      <div class="text-item" style="text-align:center;">
        <el-button type="text" size="medium" style="cursor: pointer;width:40%;color: #606266;float:left;" @click="selectSeason('第一季度')">第一季度</el-button>
        <el-button type="text" size="medium" style="cursor: pointer;float:right;width:40%;color: #606266;" @click="selectSeason('第二季度')">第二季度</el-button>
      </div>
      <div class="text-item" style="text-align:center;">
        <el-button type="text" size="medium" style="cursor: pointer;width:40%;color: #606266;float:left;" @click="selectSeason('第三季度')">第三季度</el-button>
        <el-button type="text" size="medium" style="cursor: pointer;float:right;width:40%;color: #606266;" @click="selectSeason('第四季度')">第四季度</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showSeason: false, //是否显示选择季度面板
      year: new Date().getFullYear(), //默认当前年
      seasonValue: "请选择", //input中显示的内容
      time: {
        stTime: "",
        edTime: "",
      },
      colorItem: "#c0c4cc",
      displayShow: "none",
    };
  },
  created() {
    // 点击页面的任何一个地方，都隐藏提示
    this.text();
  },
  watch: {
    //方法1
    seasonValue(newVal, oldVal) {
      console.log(`新值：${newVal}`);
      console.log(`旧值：${oldVal}`);
      //  color: #606266;
      if (newVal == "请选择") {
        this.colorItem = "#c0c4cc";
      } else {
        this.colorItem = "#606266";
      }
    },
  },
  methods: {
    handler() {
      if (this.seasonValue == "请选择") {
        this.displayShow = "none";
      } else {
        this.displayShow = "block";
      }
    },
    text() {
      document.addEventListener("click", (e) => {
        if (this.$refs.shows) {
          let self = this.$refs.shows.contains(e.target);
          if (!self) {
            this.showSeason = false;
          }
        }
      });
    },
    btn() {
      this.showSeason = !this.showSeason;
    },
    close() {
      this.seasonValue = "请选择";
      this.showSeason = false;
    },
    prev() {
      this.year = +this.year - 1;
    },
    next() {
      this.year = +this.year + 1;
    },
    selectSeason(quarter) {
      this.seasonValue = this.year.toString() + "-" + quarter.toString();
      this.showSeason = false;
      switch (quarter) {
        case "第一季度":
          this.time.stTime = this.year.toString() + "-01-01" + " " + "00:00:00";
          this.time.edTime = this.year.toString() + "-03-31" + " " + "23:59:59";
          break;
        case "第二季度":
          this.time.stTime = this.year.toString() + "-04-01" + " " + "00:00:00";
          this.time.edTime = this.year.toString() + "-06-30" + " " + "23:59:59";
          break;
        case "第三季度":
          this.time.stTime = this.year.toString() + "-07-01" + " " + "00:00:00";
          this.time.edTime = this.year.toString() + "-09-30" + " " + "23:59:59";
          break;
        case "第四季度":
          this.time.stTime = this.year.toString() + "-10-01" + " " + "00:00:00";
          this.time.edTime = this.year.toString() + "-12-31" + " " + "23:59:59";
          break;
      }
      this.$emit("getQuarter", this.time); //传值给父组件
    },
  },
};
</script>
<style lang="scss">
.quarter {
  position: relative;
  .input-wrap {
    width: 220px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    color: #606266;
    position: relative;
    .el-icon-date {
      color: #c0c4cc;
      margin-left: 10px;
      margin-right: 8px;
    }
    .el-icon-circle-close {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 10px;
      color: #c0c4cc;
      display: none;
      cursor: pointer;
    }
  }
  .pop {
    width: 300px;
    position: absolute;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #dfe4ed;
    border-radius: 4px;
    color: #606266;
    padding: 8px 15px 15px 15px;
    top: 52px;
    z-index: 10;
    .card-header {
      height: 40px;
      border-bottom: 1px solid #e6ebf5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      .text-year {
        font-size: 16px;
      }
    }
    &::before {
      content: "";
      border-bottom: 10px solid #dfe4ed;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      position: absolute;
      left: 13%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      top: -8px;
      border-radius: 5px;
    }
    &::after {
      content: "";
      border-bottom: 8px solid #fff;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      position: absolute;
      left: 13%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      top: -6px;
      border-radius: 5px;
    }
  }
}
</style>