效果图:
<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>
当做组件直接引用即可使用啦!