element-ui 季度选择器

最近在vue项目练习时发现element-ui没有关于季度的选择器，周、年、月这些都有。于是参考网上大神写的自己搞了一个简易版本。项目需求是选择某年某一个季度，然后获得该季度第一天和最后一天的时间戳来获取数据。最后结果如图：

本篇文章参考了 element季度选择控件_Ponnenult的博客-CSDN博客_element季度选择前言： 季度选择控件，element官网没有提供。实现效果: 默认是当前月份的季度实现原理：在页面上放一个input，然后点击出现card卡片，卡片里面放季度的内容封装组件源码：源码api见最下面
日期

如果想看完美版本，请看上面网址内容

1 创建子组件 quarter.vue

<template>
 <div>
    <span>请选择季度：</span>
    <el-input v-model="seasonValue" class="w-50 m-2" placeholder="请选择季度" style="width:250px" @focus="showSeason = true">
        <template #prefix>
          <el-icon class="el-input__icon"><calendar /></el-icon>
        </template>
    </el-input>
     <el-card class="box-card" v-if="showSeason" style="height:180px;margin-left:60px;margin-top:10px;width:300px;z-index:999;position:fixed">
        <template #header>
        <div class="card-header">
            <el-button  @click="prev" style="border:none"><el-icon><ArrowLeft /></el-icon></el-button>
            <span style="text-align:center">{{year}}</span>
            <el-button  @click="next" style="border:none"><el-icon><ArrowRight /></el-icon></el-button>
        </div>
        </template>
        <div class="text item" style="text-align:center;">
        <el-button
          type="text"
          size="medium"
          style="width:40%;color: #606266;float:left;"
          @click="selectSeason('第一季度')"
        >第一季度</el-button>
        <el-button
          type="text"
          size="medium"
          style="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="width:40%;color: #606266;float:left;"
          @click="selectSeason('第三季度')"
        >第三季度</el-button>
        <el-button
          type="text"
          size="medium"
          style="float:right;width:40%;color: #606266;"
          @click="selectSeason('第四季度')"
        >第四季度</el-button>
      </div>
    </el-card>
 </div>
</template>
<script>
export default {
  data() {
    return {
      showSeason: false, //是否显示选择季度面板
      year: new Date().getFullYear(), //默认当前年
      seasonValue: '', //input中显示的内容
      time:{
         stTime:'',
         edTime:''
      }
     
    }
  },
  created() {
  },
  methods: {
    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>

2 父组件引用

<quarter @getQuarter="getQuarter"></quarter>

import quarter from './quarter.vue'

components: {
    quarter
  },

//获取季度子组件传回的数据
getQuarter(val:any){
  this.dataForm.stTime = (new Date(val['stTime']).getTime()/1000).toString()
  this.dataForm.edTime = (new Date(val['edTime']). getTime()/1000).toString()
 },

这样就OK了，嘻嘻嘻