calendar文档
<template>
...<Calendar :min-date="start" :max-date="end":title="null" :show-mark="false" :show-subtitle="false" :show-confirm="false" :show-title="true":poppable="false" :round="false" ><template v-slot:title><div style="background-color: red;height: 100%;display: flex;align-items: center;justify-content: center;"><span @click="preMonth" style="margin-right: 10px">上一月</span>{{dateStr}}<span @click="NextMonth" style="margin-left: 10px">下一月</span></div></template></Calendar>
...
</template>
<script>import { Calendar } from 'vant';export default {components: {Calendar},data(){return{...dateStr:new Date().getFullYear()+"-"+(new Date().getMonth()+1),start:new Date(new Date().getFullYear(), new Date().getMonth(),1),end:new Date(new Date().getFullYear(), new Date().getMonth(),31),...}},methods:{...NextMonth(){console.log("NextMonth")// start:new Date(new Date().getFullYear(), new Date().getMonth(),1),// end:new Date(new Date().getFullYear(), new Date().getMonth(),31),let start = this.startlet end = this.endthis.start = new Date(start.getFullYear(), start.getMonth()+1,1)this.end = new Date(end.getFullYear(), end.getMonth()+1,new Date(start.getFullYear(), start.getMonth()+1,0).getDate())this.dateStr = this.start.getFullYear()+"-"+(this.start.getMonth()+1)},preMonth(){console.log("preMonth")let start = this.startlet end = this.endthis.start = new Date(start.getFullYear(), start.getMonth()-1,1)this.end = new Date(end.getFullYear(), end.getMonth()-1,new Date(start.getFullYear(), start.getMonth()-1,0).getDate())this.dateStr = this.start.getFullYear()+"-"+(this.start.getMonth()+1)},}}
</script><style lang="less" scoped>
...
/deep/.van-calendar__month-title{display: none;
}
</style>
效果如图: