Vant2移动端Vue组件库问题记录.docx

第

Vant2移动端Vue组件库问题记录

目录发布初衷：Popup弹出层DatetimePicker时间选择Field输入框Picker选择器List列表Tab标签页总结

发布初衷：

记录在移动端项目中使用Vant2组件库时遇到的各种问题，

方便以后再次遇到类似问题，能够快时查阅解决

Popup弹出层

介绍

弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。

问题记录：Field输入框和Popup弹出层两个结合使用时，

在iPhone真机上测试的时候出现的一个小bug：

点击Field输入框的时候，第一次会弹出一个手机的键盘输入框，

点击第二次的时候才出来Popup弹出层里面的内容（比如日期选择器）

解决方案：

给Field输入框设置readonly，通过readonly将输入框设置为只读状态

输入框van-field必须得加入readonly这个只读属性,

不然会导致用户手机触发默认键盘遮挡你的弹窗和选择器内容影响体验

也不要用disabled来禁用输入框,样式会变成禁用状态下的样式很难改动

只需要设置为只读即可,也不会触发手机键盘

DatetimePicker时间选择

介绍

时间选择器，支持日期、年月、时分等维度，通常与弹出层组件配合使用。

确认选择的时间数据是需要自己处理的，详见confirmPicker方法

template

div

van-cell

title=开始时间

is-link

:value-:value=timeValue

@click=showPopup/

van-popupv-model=showposition=bottom

van-datetime-picker

v-model=currentDate

type=datetime

title=选择时间

:loading=isLoadingShow

:min-date=minDate

:max-date=maxDate

:formatter=formatter

@cancel=show=false

@confirm=confirmPicker

/van-popup

/div

/template

script

exportdefault{

name:Seller,

data(){

return{

msg:商家页面,

timeValue:请选择时间,

show:false,

isLoadingShow:true,

currentDate:newDate(),

minDate:newDate(),

maxDate:newDate(2025,12,31),

className:

methods:{

//显示弹窗

showPopup(){

this.show=true

this.isLoadingShow=true

setTimeout(()={

this.isLoadingShow=false

},500)

//确认选择的时间

confirmPicker(val){

letyear=val.getFullYear()

letmonth=val.getMonth()+1

letday=val.getDate()

lethour=val.getHours()

letminute=val.getMinutes()

if(month=1month=9){month=`0${month}`}

if(day=1day=9){day=`0${day}`}

if(hour=0hour=9){hour=`0${hour}`}

if(minute=0minute=9){minute=`0${minute}`}

this.className=timeClass

this.timeValue=`${year}-${m