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直接隱藏掉