vant - 弹框 【Popup 弹出层】【DatetimePicker 时间选择】

【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"

只有年、月