Vue 用Vant如何实现时间选择器的示例代码

1.查看Vant官网https://youzan.github.io/vant/#/zh-CN/datetime-picker

引入Vant中DatetimePicker组件（全局引入后可直接使用）

import Vue from 'vue';
import { DatetimePicker } from 'vant'
Vue.use(DatetimePicker);

关键使用代码（结合vant组件Popup的底部弹出层一起使用）

<van-popup v-model="dateShow" position="bottom">
   <van-datetime-picker v-model="currentDate" type="year-month" @cancel="handleCancel"
    @confirm="handleEndDateConfirm" />
  </van-popup>

export default {
 data() {
  return {
   dateShow: false,
   currentDate: new Date()
  };
 }
}

效果图

实现点击确定 和取消的方法

handleCancel () {
   this.dateShow = false;
  },
  //开始时间
  handleEndDateConfirm () {
   this.dateShow = false;
   this.titleTime = dateFormat(this.currentDate, 'yyyy-MM')
  },

以上就是Vue 用Vant如何实现时间选择器的示例代码。生活的可怕之处就是在这里，有些人可以安于现在的生活，不自卑不敷衍，也能够很好淡然地生活下去；有些人想要去远方，想要生活剧烈，不疯魔不成活，虽然累倒也活得轰轰烈烈。可尴尬就尴尬在你活在另一种生活里——不上不下的生活。更多关于Vue 用Vant如何实现时间选择器的示例代码请关注haodaima.com其它相关文章！