【HelloWorld.vue】
<template>
<div class="hello">
<van-row class="m-header">
<van-col span="">
<van-icon name="arrow-left" class="m-header-icon" />内容</van-col>
</van-row>
<van-button type="primary" @click="showpopup">按钮</van-button>
<van-popup v-model="show" position="bottom">
<van-datetime-picker
v-model="currentDate"
type="date"
:min-date="minDate"
:max-date="maxDate"
:formatter="formatter"
/>
</van-popup>
</div>
</template>
<script>
import { Popup } from 'vant';
Vue.use(Popup);
export default {
data() {
return {
show: false,
minDate: new Date(,,),
maxDate: new Date(,,),
currentDate: new Date()
};
},
methods:{
popup:function(){
if(!this.show){
this.show = true;
}else{
this.show = false;
}
},
formatter(type, value) {
if (type === 'year') {
return `${value}年`;
} else if (type === 'month') {
return `${value}月`
} else if (type === 'day') {
return `${value}日`
}
return value;
}
}
};
</script>
position弹框位置等属性查看vant API 【Popup 弹出层】
type="datetime"
具体到时间
type="year-month"
只有年、月