Element-plus封装日期季度选择组件

由于element-plus没有提供季度选择组件，所以这里我就随手封装了一下，可以根据自己的需求在进行改进，仅供参考

<template>
    <div>
        <mark style="position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);z-index:999;"
            v-show="data.showSeason" @click.stop="data.showSeason = false"></mark>
        <el-input placeholder="请选择季度" v-model="data.season" style="width:209px;" @focus="data.showSeason = true">
            <i slot="prefix" class="el-input__icon el-icon-date"></i>
        </el-input>
        <el-card class="box-card"
            style="width:322px;padding: 0px 3px 0px;margin-top:10px;position:fixed;z-index:9999;background-color: white !important;"
            v-show="data.showSeason">
            <div class="clear-fix">
                <div class="clear-fix-item">
                    <el-icon @click="prev">
                        <DArrowLeft color="#969799" />
                    </el-icon>
                </div>
                <div>
                    {{ data.year }}年
                </div>
                <div class="clear-fix-item">
                    <el-icon @click="next">
                        <DArrowRight color="#969799" />
                    </el-icon>
                </div>
            </div>
            <div class="quarter-box">
                <div :class="['quarter-item', itemClss(index)]" v-for="index in 4" :key="index"
                    @click="selectSeason(index)">
                    第{{ num(index) }}季度
                </div>
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { reactive, computed } from 'vue';
import { numberfilter } from "@/utils/index";
const emit = defineEmits(['ok'])
const data = reactive({
    showSeason: false,
    year: new Date().getFullYear(),
    selectIndex: getMonth(),//当前第几季度
    isFlag: 0,//0 当前年份 1大于当前年份 -1 小于当前年份
    selectData: {
        year: new Date().getFullYear(),
        season: getMonth()
    },  //默认选择的值
    season: `${new Date().getFullYear()}年第${numberfilter(getMonth())}季度`,
})
const num = computed(() => (num) => {
    return numberfilter(Number(num))
})
const itemClss = computed(() => (index) => {
    if (data.isFlag == -1) {
        if (data.selectIndex == index) {
            return 'quarter-item-select'
        }
        if (data.year < new Date().getFullYear()) {
            return 'quarter-item-select-no'
        }
    }
    if (data.isFlag == 1) {
        if (data.year < new Date().getFullYear()) {
            return 'quarter-item-select-no'
        }
    }
    if (data.isFlag == 0) {
        if (index <= getMonth()) {
            if (data.selectIndex == index) {
                return 'quarter-item-select'
            }
            return 'quarter-item-select-no'
        }
    }
})
function getMonth() {
    var today = new Date(); //获取当前时间
    var month = today.getMonth() + 1;//getMonth返回0-11
    if (month >= 1 && month <= 3) {
        return 1;
    } else if (month >= 4 && month <= 6) {
        return 2;
    } else if (month >= 7 && month <= 9) {
        return 3;
    } else {
        return 4;
    }
}
function prev() {
    data.year = data.year - 1
    clearSelect()
    if (data.year === new Date().getFullYear()) {
        data.isFlag = 0
        return
    }
    data.isFlag = -1


}
function next() {
    data.year = data.year + 1
    clearSelect()
    if (data.year === new Date().getFullYear()) {
        data.isFlag = 0
        return
    }
    data.isFlag = 1

}
function clearSelect() {
    data.selectIndex = null
    if (data.selectData.year == data.year) {
        data.selectIndex = data.selectData.season
    }
}
function selectSeason(i) {
    if (data.year > new Date().getFullYear()) return
    if (data.year == new Date().getFullYear()) {
        if (i > getMonth()) return
    }
    data.selectData.year = data.year
    data.selectData.season = i
    data.selectIndex = i
    data.season = `${data.year}年第${numberfilter(Number(data.selectIndex))}季度`
    emit('ok', i, data.year)
    data.showSeason = false
}
</script>
<style scoped lang="scss">
.quarter-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.quarter-item {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    // border-width: 1px;
    // border-style: solid;
    border-radius: 2px;
    border-color: #c8c9cc;
    color: #c8c9cc;
    font-size: 14px;
    margin: 10px;
    cursor: pointer;
}

.clear-fix {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 0;
    padding-bottom: 20px;
    box-sizing: border-box;

}

.clear-fix-item {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.quarter-item-select {
    background-color: #155bd4;
    color: white;
}

.quarter-item-select-no {
    color: #323233;
}
</style>

使用

import elDatePickerQuarter from '@/components/elDatePickerQuarter/index.vue'
<elDatePickerQuarter @ok="cofirmSeason" ></elDatePickerQuarter>

阿拉伯数字转中文

export function numberfilter (num) {
  const changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'] // changeNum[0] = "零"
  const unit = ['', '十', '百']
  num = parseInt(num)
  const getWan = (temp) => {
    const strArr = temp.toString().split('').reverse()
    let newNum = ''
    for (var i = 0; i < strArr.length; i++) {
      newNum = (i == 0 && strArr[i] == 0 ? '' : (i > 0 && strArr[i] == 0 && strArr[i - 1] == 0 ? '' : changeNum[strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i]))) + newNum
    }
    return newNum
  }
  const overWan = Math.floor(num / 100)
  let noWan = num % 100
  if (noWan.toString().length < 2) noWan = '0' + noWan
  let strr = (overWan ? getWan(overWan) + '百' + getWan(noWan) : getWan(num))
  if(strr.split('')[0] == '一'){
    let showNum = "";
    if(strr == '一'){
      showNum = strr.substring(0);
    }else{
      showNum = strr.substring(1);
    }
    return showNum
  }else{
    let showNum = overWan ? getWan(overWan) + '百' + getWan(noWan) : getWan(num);
    return showNum
  }
}

欢迎留言