element-ui 季度选择器-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui 季度选择器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

element-ui 季度选择器

本篇文章参考了 element季度选择控件_Ponnenult的博客-CSDN博客_element季度选择前言：季度选择控件，element官网没有提供。实现效果: 默认是当前月份的季度实现原理：在页面上放一个input，然后点击出现card卡片，卡片里面放季度的内容封装组件源码：源码api见最下面<template> <div> 日期  <mark class="bgCard" v-if="showSeason" @click....https://blog.csdn.net/weixin_44727080/article/details/115064431

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

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了，嘻嘻嘻文章来源地址https://www.toymoban.com/news/detail-509628.html

到了这里，关于element-ui 季度选择器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！