vue - Vant使用阿里矢量图以及Field组件中使用

本文链接：https://blog.youkuaiyun.com/qq_43886365/article/details/130280150

Vant自带的图标比较少，有时候不能满足Field组件的业务需求，这时我们可以引用第三方的字体库配合使用；

1，先下载到本地

阿里矢量库官网：https://www.iconfont.cn/

在这里插入图片描述
选中自己想要的图标然后点击 购物车按钮，放到自己的购物车里面，当想要的全部都选好了，就可以点击 下载代码 按钮，下载下来；

在这里插入图片描述
2，下载完成后放在项目的静态文件夹中

下载完成解压后放在src/assets下或其他的地方，像demo.html、demo.css等示范文件可选择性删除。

在这里插入图片描述
3，引入

在需要使用的vue组件中引入iconfont.css，或者多个当使用可以在main.js里面引入;

// 引入阿里字体
import "@/assets/aliIconFont/meetAbout/iconfont.css";

4，使用

最后使用<van-icon>即可：

 <van-icon @click="firstSearch" class="iconfont icon-sousuo" />

重点是有class="iconfont icon-sousuo"这部分； iconfont 是必须的，icon-sousuo是你下载的图标类名；在iconfont.css里面可以看到：

在这里插入图片描述

2，在Vant的组件中使用

以Field为例，Field支持使用 slot 插槽自定义图标的：

在这里插入图片描述
代码如下：

 		 <!-- 第一个输入框 -->
          <div class="searchLocation top">
            <van-field
              v-model="form.address"
              left-icon="location-o"
              placeholder="请输入会议地址"
            >
              <template #button>
               <!-- 正常使用 阿里字体 -->
                <van-icon  class="iconfont icon-sousuo" />
              </template>
            </van-field>
          </div>
          
		  <!-- 第二个输入框  下面使用了slot 插槽-->
          <div class="searchLocation bottom">
            <van-field
              v-model="form.meetAddress"
              placeholder="请输入会议详细地址"
            >
              <!-- 插槽使用 阿里字体 icon- dingwei-->
              <van-icon class="iconfont icon-zhiyuandizhi3" slot="left-icon" />
            </van-field>
          </div>