Using vant weapp in mpvue [1]

Go directly to the key to talk about the pits encountered.

According to the project requirements, a page, the following components appear at the same time

1. Input input box
2. Picker selector

3. Time selector

4、textarea

5. Image upload and preview

 

First of all, I looked at vant-ui and found that the above components can be used, so I happily started. . . .

Introduced all the required components and found myself awesome

{
    "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"
    }
}

Due to the problems found, they have been fixed, so I can only describe the problems here

1. vant-field component

When I wrote it, the thief was special 6, and the effect was not bad. but! ! ! ! ! ! ! ! ! !

When I used vant-popup, I opened picker and date-picker, and found that the value of vant-field was emptied.

The official search, there is only one issue, but there is no good explanation.

Then I think about it, forget it, I don't need the vant picker.

So I changed to the native Picker of the applet.

Looks like the problem is fixed, hmm

Next, open the image preview. . . .

It was found that the value was emptied again. .

only GG

So I removed the vant-field, no need

Use native input directly

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

Solve the problem.

 

2. About the textarea component

Because the default level of this component in the applet is the highest.

So the placeholder will appear on the phone and float above the pop-up window.

Solution: When opening this type of pop-up window, hide the texarea directly

{{o.name}}

{{m.name}}