mpvue中使用vant weapp【一】

2019独角兽企业重金招聘Python工程师标准>>>

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

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

1、input输入框
2、picker选择器

3、时间选择器

4、textarea

5、图片上传和预览

 

首先看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"
    }
}

由于发现的问题，已经被修复，这里只能针对问题做描述

1、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>

解决问题。

 

2、关于textarea组件

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

所以在手机上会出现placeholder会浮在弹窗的上面。

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

转载于:https://my.oschina.net/u/3883810/blog/3025127