封装一个Element-UI多功能时间选择组件：【昨天、今天 或近7天、近30天等其他任意天数】。搭配dayjs使用。

简介

组件封装：一个Element-UI多功能时间选择组件：【昨天、今天、近七天、近30天等其他任意天数】。需要搭配dayjs使用。
适用于历史时间查询。话不多说直接上图。

快速上手

A：安装dayjs,在main.js文件挂载

import dayjs from 'dayjs'；
Vue.prototype.$dayjs = dayjs；

B：在components文件夹创建组件文件
C：在页面引用组件（配置参数使用，注释比较详细）

特色功能

A： 时间选项动态配置
B： 时间禁用（可选择范围）灵活（禁用n天 || 禁用n月）
C：点击radio-button按钮触发事件、时间选择触发事件。

示例图

图一

图二

组件代码

<template>
    <div class="containers">
        <el-radio-group @change="changeDate(value)" v-model="value" size="small">
            <el-radio-button v-for="(item,index) in timeArr" :key="index" :label="item.value">{{ item.label }}</el-radio-button>
        </el-radio-group>
        <el-date-picker
            size="small"
            :picker-options="pickerOptions" 
            :clearable="false"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            v-model="dateArr"
            @change="changeValue"
            style="width: 240px"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
        ></el-date-picker>
    </div>
</template>
<script>
export default {
    props:{
        timeArr:{  // eg: [{value:'1',label:'今天'},{value:'2',label:'昨天'},{value:'7',label:'最近7天'},{value:'30',label:'最近30天'}]
            type:Array, // 注意：只能配置天数，不能配置月。
            default:()=>[]
        },
        dayActive:{ // 默认timeArr中激活天数选项
            type:[String,Number],
            default:"7" // 注意：配置默认值，timeArr里面必须要有这个值。
        },
        today:{ // 是否包含今天：默认为true包含
            type:Boolean,
            default:true
        },
        dayLimit:{ // 时间禁用：能选择的最近天数 从今天开始往前算
            type:[String,Number],
            default:"180"
        },
        monthLimit:{ // 时间禁用：能选择的最近月数 从今天开始往前算（monthLimit权重大于dayLimit） 
            type:[String,Number],
            default:"0"
        }
    },
    data(){
       return{  
            pickerOptions: {
                disabledDate:(time)=> { // 小于今天 最多180天(需要今天 与不需要今天)
                    let todayStart = this.$dayjs().format("YYYY-MM-DD 00:00:00");
                    let todayEnd = this.$dayjs().format("YYYY-MM-DD 23:59:59");
                    let yesterdayStart = this.$dayjs().subtract(1,"day").format("YYYY-MM-DD 00:00:00")
                    let yesterdayEnd = this.$dayjs().subtract(1,"day").format("YYYY-MM-DD 23:59:59")
                    if(Number(this.monthLimit)!==0){ // 禁用月份
                        if(this.today){ //包含今天
                            return time.getTime() > new Date(todayEnd).getTime() || time.getTime() < this.$dayjs(todayStart).subtract(this.monthLimit, 'month');
                        }else{  //不包含今天[统一前挪一天]
                            return time.getTime() > new Date(yesterdayEnd).getTime() || time.getTime() < this.$dayjs(yesterdayStart).subtract(this.monthLimit, 'month');
                        }
                    }else{ // 禁用天
                        if(this.today){ //包含今天
                            return time.getTime() > new Date(todayEnd).getTime() || time.getTime() < this.$dayjs(todayStart).subtract(this.dayLimit-1, 'day');
                        }else{  //不包含今天[统一前挪一天]
                            return time.getTime() > new Date(yesterdayEnd).getTime() || time.getTime() < this.$dayjs(todayStart).subtract(this.dayLimit, 'day');
                        }
                    }
                }
            },  
           value:"",
           dateArr:[]
       } 
    },
    created(){
        this.changeDate(this.dayActive); // 初始化激活默认天数选项        
    },
    methods:{
        // radio-button按钮点击日期回显：今天、昨天 + 2天以上任意天数
        changeDate(label) {
            this.value = label
            let newStart="";
            let newEnd="";
            if(label ==1){ // 今日1
                newStart = this.$dayjs().format("YYYY-MM-DD");
                newEnd = this.$dayjs().format("YYYY-MM-DD");
            }else if(label == 2){ // 昨天2
                newStart = this.$dayjs().subtract(1,'day').format("YYYY-MM-DD");
                newEnd = this.$dayjs().subtract(1,'day').format("YYYY-MM-DD");
            }else{ // 处理7天 30天 或者更多
                if(this.today){ // 包含今天
                    newStart = this.$dayjs().subtract(label-1,'day').format("YYYY-MM-DD"); 
                    newEnd = this.$dayjs().format("YYYY-MM-DD");
                }else{
                    newStart = this.$dayjs().subtract(label,'day').format("YYYY-MM-DD");
                    newEnd = this.$dayjs().subtract(1,'day').format("YYYY-MM-DD"); 
                }
            }
            this.dateArr = [newStart,newEnd]
            this.$emit('changDay',label)
            this.$emit('getDateArr',this.dateArr)
        },
        // 日期组件选择事件
        changeValue(){
            this.$emit('changDay','')
            this.$emit('getDateArr',this.dateArr)
            this.$nextTick(()=>{
                this.value = this.dayActive
            })
        }
    }
}
</script>
<style lang="scss" scoped>
    .containers{
        display:flex;
        align-items: center;
        margin-bottom: 20px;
        .el-radio-group{
            margin-right: 10px;
        }
    }
</style>

父页面使用组件

<template>
	<div class="container_opera">
	    <div class="desc">
	        <timeSearch @getDateArr="getDateArr" @changDay="changDay" 
	        :timeArr="timeArr" :dayActive="30" :dayLimit="180"/>
	    </div>
	</div>
</template>

<script>
import timeSearch from "@/components/timeSearch";
export default {
     components:{timeSearch},
     data(){
        return{
            dayActive:30,
            timeArr:[{value:'1',label:'今天'},{value:'2',label:'昨天'},{value:'7',label:'最近7天'},{value:'30',label:'最近30天'}],
            timeGap:{startTime:"",endTime:""},
        }
     },
     mounted(){
     },
     methods:{
        changDay(val){
            this.dayActive = val;
            this.timeGap.startTime = val[0];
            this.timeGap.endTime = val[1];
        },
        getDateArr(value){
            this.timeGap.startTime = value[0];
            this.timeGap.endTime = value[1];
        },
     }
}
</script>

有问题请在评论区
或者联系QQ:505005519