Vant的Field使用自定義圖示

Vant自帶的圖示比較少，有時候不能滿足使用。

普通使用第三方圖示

關于Vant怎麼使用第三方圖示，網上有文章，以使用iconfont為例，有幾種方法，說其中一種：

1. 首先下載下傳圖示到本地：

1. 下載下傳完成後放在項目中，如放在

   src/assets

   下，像

   demo.html、demo.css

   等示範檔案可選擇性删除。
2. 在

   main.js

   中添加上述樣式的引入代碼：

import "@/assets/font/iconfont.css";           

複制

1. 最後使用

   <van-icon>

   即可，如（重點是有

   class="iconfont" class-prefix="icon"

   這部分）：

<van-icon class="iconfont" class-prefix="icon" name="mobilephone"></van-icon>           

複制

在Vant的元件中使用

以Field為例，Field支援圖示的，如下面代碼：

<van-field
        v-model="form.userId"
        name="手機号"
        left-icon="smile-o"
        right-icon="warning-o"
        placeholder="請輸入手機号碼"
        :rules="[{ required: true, message: '請輸入手機号碼' }]"
     />           

複制

效果如圖：

那我想換成自定義圖示，像這樣寫法看行不行（添加

class="iconfont?imageView2/2/w/1620" class-prefix="icon"

這部分）：

<van-field
        v-model="form.userId"
        name="手機号"
        class="iconfont" class-prefix="icon"
        left-icon="mobilephone"
        right-icon="warning-o"
        placeholder="請輸入手機号碼"
        :rules="[{ required: true, message: '請輸入手機号碼' }]"
      />           

複制

會發現不行，改成這樣：

<van-field
        v-model="form.userId"
        name="手機号"
        left-icon="mobilephone"
        right-icon="mobilephone"
        placeholder="請輸入手機号碼"
        :rules="[{ required: true, message: '請輸入手機号碼' }]"
      >
        <van-icon class="iconfont" class-prefix="icon" slot="left-icon" name="mobilephone"></van-icon>
        <van-icon class="iconfont" class-prefix="icon" slot="right-icon" name="mobilephone"></van-icon>
      </van-field>           

複制

可以！看效果