选择一个时间段的思路
如图
部分代码如下
<template>
<div class="biji">
<div class="span" v-for="(item,index) in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]"
:key="index"
@click="click(item)"
:class="(rilimouth<=nowmouth&&item<now)?'noclick':(item<=keyArr[1]&&item>=keyArr[0])||(item==clickitem)?'active':''">
{{item}}
</div>
</div>
</template>
<script>
export default {
name: 'Biji',
data() {
return {
keyArr:[],
clickitem:0,
rilimouth:7, //控制日历上的月份
nowmouth:7, //实际的月
now:9,
}
},
created() {
},
computed: {},
methods: {
click(item){
this.clickitem=item;
if(this.keyArr.length>=2){
this.keyArr=[];
}
this.keyArr.push(item);
if(this.keyArr[0]>this.keyArr[1]){
this.keyArr.reverse();
}
console.log(this.keyArr)
}
}
}
</script>
<style scoped lang="scss">
@import "../common/common";
.span{
width: 1rem;
height: 1rem;
background: pink;
float: left;
text-align: center;
line-height: 1rem;
&.active{
background: orange;
}
&.noclick{
pointer-events: none;
background: #ccc;
}
}
</style>