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
  />

效果图就在最上面,我就不在展示了。