横向 的vant组件的日历
发布时间
阅读量：
阅读量
vant 的日历组建只支持纵向变化，不支持横向，就稍微改变了一下
<template>
<div class="calendar-wrap" style="positon:relative">
<div class="month-year">{{showYear}}年{{showMonth+1}}月</div>
<van-icon class="arrow" @click="deMonth" name="arrow" />
<van-icon class="arrow-left" @click="adMonth" name="arrow-left" />
<van-icon class="arrow-year" @click="deYear" name="arrow" />
<van-icon class="arrow-year-1" @click="deYear" name="arrow" />
<van-icon class="arrow-left-year-1" @click="adYear" name="arrow-left" />
<van-icon class="arrow-left-year" @click="adYear" name="arrow-left" />
<van-calendar class="calendar" ref="calendar"
color="#399f0e"
row-height="40" :min-date="minDate"
:max-date="maxDate" :default-date="nowDay"
:poppable="false" :show-subtitle="false"
:show-title="false" :show-mark="false"
:show-confirm="false" :formatter="formatterDay" @select="slecetDay"
>
<template #bottom-info="item" >
<span class="mark-green" v-if="item.bottomInfo==1"></span>
<span class="mark-red" v-if="item.bottomInfo==2"></span>
</template>
</van-calendar>
</div>
</template>
<script>
export default {
data(){
return{
minDate: new Date(),
maxDate: new Date(),
defaultDate: new Date(),
monthCont: 0,
yearCont:0,
year: new Date().getFullYear(),
month: new Date().getMonth(),
nowDay:new Date(),
showYear: new Date().getFullYear(),
showMonth:new Date().getMonth(),
}
}
watch:{
defaultDate(val) {
this.setMinMaxDay();
}
},
methods:{
formatterDay(day){
return day;
},
slecetDay(day){
},
// 当前月上一个月
deMonth() {
this.monthCont--;
this.defaultDate = new Date(
this.year,
this.month + this.monthCont,
1
);
},
// 当前月下一个月
adMonth() {
this.monthCont++;
this.defaultDate = new Date(
this.year,
this.month + this.monthCont,
1
);
},
// 当前年上一个年
deYear() {
this.yearCont--;
this.defaultDate = new Date(
this.year+ this.yearCont,
this.month,
1
);
},
// 当前年下一个年
adYear() {
this.yearCont++;
this.defaultDate = new Date(
this.year+ this.yearCont,
this.month ,
1
);
},
setMinMaxDay(){
this.showYear= this.defaultDate.getFullYear();
this.showMonth = this.defaultDate.getMonth();
var firstDay = new Date(this.defaultDate);
firstDay.setDate(1)
var endDay = new Date(this.showYear,this.showMonth+1,1);
this.minDate =new Date(
this.showYear,
this.showMonth,
firstDay.getDate()
)
endDay.setDate(0)
this.maxDate =new Date(
this.showYear,
this.showMonth,
endDay.getDate()
)
}
}
}
</script>
<style scoped lang='scss'>
.calendar-wrap::v-deep{
width: 100%;
position: relative;
.van-calendar__month-title{
display: none;
}
.mark-red{
display: block;
width: 5px;
height: 5px;
background-color: #d46b08;
border-radius: 50%;
margin: 0 auto;
}
.mark-green{
display: block;
width: 5px;
height: 5px;
background-color: #389e0d;
border-radius: 50%;
margin: 0 auto;
}
.month-year{
padding: 10px 0;
text-align: center;
font-size: 14px;
}
.arrow{
position: absolute;
top: 15px;
right: 10px;
}
.arrow-left{
position: absolute;
top: 15px;
left: 10px;
}
.arrow-year{
position: absolute;
top: 15px;
right: 30px;
}
.arrow-left-year{
position: absolute;
top: 15px;
left: 30px;
}
.arrow-year-1{
position: absolute;
top: 15px;
right: 35px;
}
.arrow-left-year-1{
position: absolute;
top: 15px;
left: 35px;
}
}
</style>
vant icon没找到双箭头就用2个单箭头组合一下
附上一下参考的链接 <>
全部评论 (0)
还没有任何评论哟~