按日、按月，日期切换，仿支付宝

思路：

是结合vant-ui，分成四部分来做的。
最外层用的是vant弹出层
第一部分：“取消”和“确定”；
第二部分：日期和月份的切换按钮；
第三部分：具体日期或月份的显示；
第四部分：vant时间选择插件。

正文开始

最外层：

最外层用到了vant里面的弹出层

<van-popup v-model="isChoiceTime" position="bottom" :style="{ height: '50%' }" /></van-popup>

isChoiceTime 控制是否显示，bottom控制弹出层在下方，height: 50%控制弹出层面积屏幕一半。

第一部分：

“取消”和“确定”

<div class="headerSlots">
   <div class="quxiao" @click="cancelClick">取消</div>
   <div class="xuanze">请选择</div>
   <div class="queding" @click="determine">确定</div>
 </div>

cancelClick 控制弹出层的关闭
determine 获取所选择的时间，并显示到列表的左上方

第二部分：

日期和月份的切换按钮

<div class="grayBox" @click="timeChoice">
  <div>{{ timeName ? '按月选择' : '按日选择' }}</div>
</div>


<script type="text/javascript">
export default {
  data() {
    return {
      timeName: true,
    }
  }   
}
</script>

timeName 默认按月选择
按日、按月选择对应vant时间选择组件不一样，通过timeChoice来控制

第三部分：

具体日期或月份的显示

<div class="YouTime" v-show="timeAll == 1">{{mouthTime}}</div>
<div class="YouTime02" v-show="timeAll == 2">
  <div :class="cont == 1 ? 'blue' : 'gray' " @click="timeClick(1)">{{toolTime01}}</div>至
  <div :class="cont == 2 ? 'blue' : 'gray' " @click="timeClick(2)">{{toolTime02}}</div>
</div>


<script type="text/javascript">
export default {
  data() {
    return {
      timeAll: 1,
      cont: 1,  //点击哪个，哪个变成蓝色，并可以选择日期
      mouthTime: (new Date().getFullYear()) + '-' + ((new Date().getMonth()+1) < 10 ? "0" + (new Date().getMonth()+1) : (new Date().getMonth()+1) ),
      toolTime01: '',
      toolTime02: '结束日期',
    }
  }   
  methods: {
    timeClick(n) {
      if(n == 1) {
        this.cont = 1;
      } else {
        this.cont = 2;
      }
    },
  }
}
</script>

timeAll 结合 timeChoice 点击事件，来控制显示月份还是具体日期
mouthTime 显示月份，在打开弹出层的时候显示当前月份，点击确定按钮（determine 事件 ），获取所选时间，给 mouthTime 赋值
toolTime01 起始日期，在没有选择前，应显示当前时间，如：2020-04-02；选择时间后，显示所选择的时间
toolTime02 结束日期，在没有选择前，应显示‘结束日期’；选择时间后，显示所选择的时间
结合第四部分的 change 事件（changeTime 和 changeTimeMore），将所选时间赋值给 toolTime01，toolTime02
timeClick() 点击事件

注意事项：1.若只选择起始时间，不选择结束时间，点击确定后，则左上角只显示 “ 起始时间 ”；2.若只选择结束时间，点击确定后，则左上角显示 “ 起始时间 至 结束时间 ” ；3.若起始时间大于结束时间，则要将起始时间放前，结束时间放后（可以把两个时间转成毫秒值来比大小）

第四部分：

vant时间选择插件

<van-datetime-picker item-height="45" v-model="currentDate" type="year-month" :min-date="minDate" :max-date="maxDate" @change="changeTime" :show-toolbar="false" v-show="timeAll == 1"/>
<van-datetime-picker item-height="45" v-model="currentDate" type="date" :min-date="minDate" :max-date="maxDate" @change="changeTimeMore" :show-toolbar="false" v-show="timeAll == 2"/>

item-height="45 下图红色框选中部分，之前没加这个，会出现一行对不齐的现象

:show-toolbar=“false” 去掉时间选择上的 “取消” 和 “确定” 按钮
changeTime 和 changeTimeMore 是 change 事件（当值变化时触发的事件），当我们划拉的时候，蓝色字体显示的日期会跟着变动

总结：

其实这个并不难，只是繁杂了点，需要注意的地方有很多，比如时间大小的显示。
都看到这啦！觉得我文章写的好ヽ(￣▽￣)و，就给我点个赞吧~
有什么问题的地方，也欢迎指出来，我们可以交流交流~
这是我代码连接~
https://blog.csdn.net/weixin_45455635/article/details/123925623