基于iview月份的区间组件

效果图: 

<style lang="less">
.month-range-class {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    .monthPanpel {
        display: flex;
        .monthPanpel-left,
        .monthPanpel-right {
            width: 365px;
            display: flex;
            flex: 1;
            padding: 16px;
            flex-wrap: wrap;
            .monthPanpel-left-cell,
            .monthPanpel-right-cell {
                width: 60px;
                text-align: center;
                height: 30px;
                line-height: 30px;
                margin-right: 10px;
                margin-left: 10px;
                margin-top: 8px;
                margin-bottom: 8px;
                border-radius: 10px;
                &:hover {
                    background: #44bcb7;
                    color: #fff;
                }
            }
        }
        .monthPanpel-right {
            border-left: 1px solid #ddd;
        }
    }
}
</style>
<template>
    <div class="month-range-class">
        <Poptip placement="bottom-start" v-model="visible" @on-popper-show="popperShowEvent">
            <Input
                v-model="monthStart"
                prefix="ios-calendar-outline"
                readonly
                placeholder="选择月份"
                clearable
                style="width: 225px;margin-bottom:0px;"
            />
            <div class="monthPanpel" slot="content">
                <div class="monthPanpel-left">
                    <div style="width:100%;display:flex;align-items:center;">
                        <span>
                            <Icon
                                type="ios-arrow-dropleft"
                                size="20"
                                @click="handleYearBefore('left')"
                                style="cursor:pointer"
                            />
                        </span>
                        <div
                            style="text-align:center;width: 100%;font-size: 16px;"
                        >{{`${yearStart}年`}}</div>
                        <span v-if="!rightYearShow">
                            <Icon
                                type="ios-arrow-dropright"
                                size="20"
                                @click="handleYearBefore('right')"
                                style="cursor:pointer"
                            />
                        </span>
                    </div>

                    <div
                        v-for="(item,index) in monthList"
                        class="monthPanpel-left-cell"
                        :key="item.value"
                        @click="handleMonthLeftClick('left',index)"
                        :style="{background:currentBgNum1.indexOf(index)>=0?'#44bcb7':'',color:currentBgNum1.indexOf(index)>=0?'#FFF':''}"
                    >
                        <span>{{item.label}}</span>
                    </div>
                </div>
                <div class="monthPanpel-right" v-if="rightYearShow">
                    <div style="width:100%;display:flex;align-items:center;">
                        <div
                            style="text-align:center;width: 100%;font-size: 16px;"
                        >{{`${yearEnd}年`}}</div>
                        <span>
                            <Icon
                                type="ios-arrow-dropright"
                                size="20"
                                @click="handleYearBefore('right')"
                                style="cursor:pointer"
                            />
                        </span>
                    </div>
                    <div
                        v-for="(item,index) in monthList"
                        class="monthPanpel-right-cell"
                        :key="item.value"
                        @click="handleMonthLeftClick('right',index)"
                        :style="{background:currentBgNum2.indexOf(index)>=0?'#44bcb7':'',color:currentBgNum2.indexOf(index)>=0?'#FFF':''}"
                    >
                        <span>{{item.label}}</span>
                    </div>
                </div>
            </div>
        </Poptip>
    </div>
</template>
<script>
export default {
    props: {},
    data() {
        return {
            rightYearShow: true,
            visible: false,
            currentBgNum1: [],
            currentBgNum2: [],
            clickNum: 0,
            yearStart: new Date().getFullYear(),
            yearEnd: new Date().getFullYear() + 1,
            monthStart: "",
            startT: [],
            monthList: [
                {
                    label: "一月",
                    value: "1"
                },
                {
                    label: "二月",
                    value: "2"
                },
                {
                    label: "三月",
                    value: "3"
                },
                {
                    label: "四月",
                    value: "4"
                },
                {
                    label: "五月",
                    value: "5"
                },
                {
                    label: "六月",
                    value: "6"
                },
                {
                    label: "七月",
                    value: "7"
                },
                {
                    label: "八月",
                    value: "8"
                },
                {
                    label: "九月",
                    value: "9"
                },
                {
                    label: "十月",
                    value: "10"
                },
                {
                    label: "十一月",
                    value: "11"
                },
                {
                    label: "十二月",
                    value: "12"
                }
            ]
        };
    },
    methods: {
        popperShowEvent() {
            this.currentBgNum1 = [];
            this.currentBgNum2 = [];
            this.startT = [];
        },
        handleMonthLeftClick(type, index) {
            if (type == "left" && this.startT.length < 2) {
                this.currentBgNum1.push(index);
                let mon = (index + 1 + "").padStart(2, 0);
                let startT = `${this.yearStart}-${mon}`;
                this.startT.push(startT);
            } else if ((type = "right" && this.startT.length < 2)) {
                this.currentBgNum2.push(index);
                let mon = (index + 1 + "").padStart(2, 0);
                let startT = `${this.yearEnd}-${mon}`;
                this.startT.push(startT);
            }
            if (this.startT.length >= 2) {
                new Date(this.startT[0]).getTime() >
                new Date(this.startT[1]).getTime()
                    ? this.startT.reverse()
                    : "";
                this.monthStart = this.startT.join("~");
                this.visible = false;
            }
        },
        handleYearBefore(type) {
            if (type == "left") {
                --this.yearStart;
                --this.yearEnd;
            } else if (type == "right") {
                ++this.yearEnd;
                ++this.yearStart;
            }
            if (this.startT.length == 1) {
                let acrossM = this.startT[0].split("-")[1];
                let acrossY = this.startT[0].split("-")[0];
                if (acrossY == this.yearStart) {
                    this.currentBgNum1 = [Number(acrossM)];
                } else {
                    this.currentBgNum1 = [];
                }
                if (acrossY == this.yearEnd) {
                    this.currentBgNum2 = [Number(acrossM)];
                } else {
                    this.currentBgNum2 = [];
                }
            }
        }
    }
};
</script>

当做组件直接引用即可使用啦!