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实现时间选择器的示例代码 的全部内容, 来源链接: utcz.com/z/359707.html

回到顶部