【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】

飞熊 • 2023年4月20日上午9:44 • 后端笔记 • 阅读 182

1，首先在vue2项目中安装ant design vue组件

npm install ant-design-vue@1.7.2

2，a-cascader组件在页面中的使用

<template>
  <a-space>
    <a-cascader
      v-model:value="value1"
      style="margin-top: 1rem"
      :options="options"
      placeholder="Please select"
    >
    </a-cascader>
    <a-cascader
      v-model:value="value2"
      suffix-icon="ab"
      style="margin-top: 1rem"
      :options="options"
      placeholder="Please select"
    />
  </a-space>
</template>

3，注册登录阿里iconfont

阿里巴巴矢量图标库

第一步，注册登录iconfont

第二步，点击进入资源管理—我的项目

第三步，新建项目

第四步，搜索图标

第五步，添加图标入库

第六步，将购物车中收藏的图标添加到新项目中

第七步，下载项目到本地

第八步，将下载的文件解压后拷贝到vue项目的src下assets目录中，如下图;

第九步，在页面中引入css，并使用ali图标

import '@/assets/aliiconfont/iconfont.css';

<a-cascader
  :options="addressOptionList"
  placeholder="请选择外出地区"
  v-model="privateForm.goRegion"
  :disabled="privateForm.id ? true : false"
  @change="goRegionInputChange"                  
  >
  <!--a-cascader级联选择后缀图标 -->
  <template #suffixIcon><span class="iconfont icon-jinggao" v-show="isMajorRegion==1"/></template>
</a-cascader>

其中上面的图标使用class的方式使用，class的名字为iconfont.css文件中的：before前面的名字。

iconfont.css文件：

@font-face {
  font-family: "iconfont"; /* Project id 3685088 */
  src: url('iconfont.woff2?t=1664781002236') format('woff2'),
       url('iconfont.woff?t=1664781002236') format('woff'),
       url('iconfont.ttf?t=1664781002236') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-jinggao:before {
  content: "\e600";
}