vue + vant 微信小程序手机端时间插件点击自带键盘和选择时间表同时弹出问题。

使用vue + vant 做的一个app,在一个选择时间的时候遇到了一个问题，电脑模拟器没什么问题，打包放到手机上出现的问题是自带键盘和选择时间显示的同时弹出了 源码：

<div class="date-time-input-wrap">
    <van-field
            v-model="loginForm.startTime"
            label="有效日期"
            placeholder="选择时间"
            @click="startTimePop = true"
    />
    <van-popup v-model="startTimePop" label="有效日期" position="bottom" :overlay="true">
        <van-datetime-picker
                v-model="currentDate"
                type="date"
                :min-date="minDate"
                :max-date="maxDate"
                @cancel="startTimeCancelDate"
                @confirm="startTimeConfirm"/>
    </van-popup>
</div>

此时时间和手机的软键盘一起弹出，解决的办法很简单：

<van-field
        v-model="loginForm.startTime"
        label="有效日期"
        placeholder="选择时间"
        readonly="readonly"
        @click="startTimePop = true"
/>

就是在van-field组件上添加readonly属性。完美解决