element季度选择控件

前言：

      季度选择控件，element官网没有提供。

实现效果: 默认是当前月份的季度

实现原理：

 在页面上放一个input，然后点击出现card卡片，卡片里面放季度的内容

封装组件源码：源码api见最下面

<template>
  <div>
    日期
    <!--背景-点击可关闭卡片-->
    <mark
      class="bgCard"
      v-if="showSeason"
      @click.stop="showSeason=false"
    ></mark>
    <el-input placeholder="请选择季度" v-model="showValue" style="width:138px;" @focus="showSeason=true">
      <i slot="prefix" class="el-input__icon el-icon-date"></i>
    </el-input>
    <el-card
      class="box-card"
      style="width:322px;padding: 0 3px 20px;margin-top:10px;position:fixed;z-index:9999"
      v-if="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="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="width:40%;color: #606266;float:left;"
          @click="selectSeason(1)"
        >第一季度</el-button>
        <el-button
          type="text"
          size="medium"
          style="float:right;width:40%;color: #606266;"
          @click="selectSeason(2)"
        >第二季度</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(3)"
        >第三季度</el-button>
        <el-button
          type="text"
          size="medium"
          style="float:right;width:40%;color: #606266;"
          @click="selectSeason(4)"
        >第四季度</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
/**
 * @file:  View 组件 季节选择控件
 * @date: 2021-03-22
 * @description: UI组件  可选择季节
 */
export default {
  props: {
    /**
     * @默认赋值
     *  date类型，默认值传的是时间 2021-03-22
     *  quarter 类型，是季度 2021-01
     * */
    defaultValue: {
      type: String,
      default: ''
    },
    /**
     * @默认赋值类型
     *  date类型，默认值传的是时间 2021-03-22
     *  quarter 类型，是季度 2021-01
     * */
    defaultType: {
      type: String,
      default: 'date'
    }
  },
  data() {
    return {
      showSeason: false,
      year: new Date().getFullYear(), //默认当前年
      month: new Date().getMonth() + 1, //默认当前月
      showValue: '' //页面上input的内容
    }
  },
  created() {
    //如果有默认值，直接用，没有默认值，把当前日期作为默认值
    if (this.defaultValue) {
      this.changeDefaultVal()
    } else {
      this.defaultValue = this.year + '-' + this.month
      this.changeDefaultVal()
    }
  },
  watch: {
    defaultValue(value) {
      this.changeDefaultVal()
    }
  },
  methods: {
    /**
     * 处理默认值
     * @params value == 默认值
     * @return 页面input内容回填默认值
     * */
    changeDefaultVal() {
      let arr = this.defaultValue.split('-')
      this.year = arr[0]
      let quarter = '' //季度
      if (this.defaultType === 'quarter') {
        quarter = arr[1]
        this.showValue = `${this.year}年${quarter}季度`
      } else if (this.defaultType === 'date') {
        let month = +arr[1]
        if (month >= 1 && month <= 3) {
          this.showValue = `${this.year}年1季度`
        } else if (month >= 4 && month <= 6) {
          this.showValue = `${this.year}年2季度`
        } else if (month >= 7 && month <= 9) {
          this.showValue = `${this.year}年3季度`
        } else if (month >= 10 && month <= 12) {
          this.showValue = `${this.year}年4季度`
        }
      }


    },
    prev() {
      this.year = +this.year - 1
    },
    next() {
      this.year = +this.year + 1
    },
    selectSeason(quarter) {
      let result = {
        date: `${this.year}年${quarter}季度`,
        year: this.year,
        quarter: quarter
      }
      //发送事件给父元素
      this.$emit('getValue', result)
      this.showSeason = false
      this.showValue = `${this.year}年${quarter}季度`
    }
  }
}
</script>
<style scoped>
  .bgCard{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0);
    z-index:999;
  }
</style>

调用方法：

import jdSelect from './jdSelect.vue'
 components: {
    jdSelect
  },
<jdSelect></jdSelect>

源码api：

1、prop里支持两个内容，分别是一个默认值（当前日期，或者当前季度两种），还有一个默认值的类型

2、传入默认值：（默认传日期）

<jdSelect :defaultValue="defaultVal"></jdSelect>

 data() {
    return {
      defaultVal: '2021-03',

3、拿到我们当前季度框显示的值信息

<jdSelect :defaultValue="defaultVal" @getValue="getValue"></jdSelect>

 methods: {
    getValue(res){
      debugger
    },