【HelloWorld.vue】

<template>
    <div class="hello">
        <van-row class="m-header">
            <van-col span="24">
                <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(1990,1,1), maxDate: new Date(2030,1,1), 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"

 

只有年、月

 

转载于:https://www.cnblogs.com/dudu123/p/10032573.html

Logo

前往低代码交流专区

更多推荐