mpvue中使用vant weapp【一】

直接进入重点谈谈遇到的坑。

根据项目需求，一个页面，同时出现如下几种组件

一、input输入框
二、picker选择器

三、时间选择器

四、textarea

五、图片上传和预览

 

首先看vant-ui发现以上几个组件均可以使用，因而愉快的撸了起来。。。。

引入了全部须要用的组件，发现本身简直棒棒哒

{
    "usingComponents": {
        "van-button": "/static/vant/button/index",
        "van-cell": "/static/vant/cell/index",
        "van-cell-group": "/static/vant/cell-group/index",
        "van-popup": "/static/vant/popup/index",
        "van-datetime-picker": "/static/vant/datetime-picker/index",
        "van-field": "/static/vant/field/index",
        "van-picker": "/static/vant/picker/index",
        "van-toast": "/static/vant/toast/index"
    }
}

因为发现的问题，已经被修复，这里只能针对问题作描述

一、vant-field 组件

写上去的时候，贼特么6，效果也不错。可是！！！！！！！！！！

当我使用vant-popup的时候，打开了picker和date-picker，发现vant-field的value值被清空了。

官方找了一下，只有一个issue，可是没有什么很好的解释。

那我想一想，算了，我就不用vant的picker算了。

因而换了小程序原生的Picker。

看上去问题好像是修复了，嗯

接下来，打开图片预览。。。。

发现value又被清空了。。

只有GG

因而乎把vant-field去掉，不用了

直接使用原生input

<van-cell title="姓名" is-link>
                <div>
                    <input type="text">
                </div>
 </van-cell>

解决问题。

 

二、关于textarea组件

由于这个组件在小程序中的默认层级是最高的。

因此在手机上会出现placeholder会浮在弹窗的上面。

解决方案：打开弹窗这种类型的时候，把texarea直接隐藏掉