Vant自定义输入框头部图标
首先说一下,Vant官方做的文档我感觉有点糙,尤其是Udine新手,有点不友好,所以我在这里演示一下如何将Field 输入框前面自定义图标。
这是成品:
首先,你要按照官方文档进行引入:
之后,选择你想使用某一部份的代码,我选择的是能够显示字数的输入框,
<van-field
v-model="message"
rows="2"
autosize
border
label="留言"
type="textarea"
maxlength="50"
placeholder="请输入留言"
show-word-limit
/>
在官方是有一点坑的,他也不说清楚,
直接在标签里面使用就行
举例:
left-icon="chat-o"
这是在以左对齐的方式,完整代码:
<van-field
v-model="message"
rows="2"
autosize
border
label="留言"
left-icon="chat-o"
type="textarea"
maxlength="50"
placeholder="请输入留言"
show-word-limit
/>
效果图就在最上面,我就不在展示了。