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

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

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";
}


目录
相关文章
|
7天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
7天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
14 0
|
7天前
|
JavaScript 前端开发 开发者
Vue的事件处理机制提供了灵活且强大的方式来响应用户的操作和组件间的通信
【5月更文挑战第16天】Vue事件处理包括v-on(@)指令用于绑定事件监听器,如示例中的按钮点击事件。事件修饰符如.stop和.prevent简化逻辑,如阻止表单默认提交。自定义事件允许组件间通信,子组件通过$emit触发事件,父组件用v-on监听并响应。理解这些机制有助于掌握Vue应用的事件控制。
19 4
|
7天前
|
JavaScript 前端开发 算法
Vue3与Vue2:对比分析与迁移指南
Vue3与Vue2:对比分析与迁移指南
|
7天前
|
JavaScript 前端开发 UED
Vue class和style绑定:动态美化你的组件
Vue class和style绑定:动态美化你的组件
|
7天前
|
JavaScript
vue封装面包屑组件
vue封装面包屑组件
13 0
|
7天前
|
JavaScript 前端开发 API
深入理解vue组件生命周期,你一定要看到最后,最后有深入探讨
深入理解vue组件生命周期,你一定要看到最后,最后有深入探讨
|
7天前
|
JavaScript Go
VUE3+vite项目中动态引入组件和异步组件
VUE3+vite项目中动态引入组件和异步组件
|
7天前
|
缓存 算法 JavaScript
vue中组件保活<keep-alive>的使用
vue中组件保活<keep-alive>的使用
|
7天前
|
JavaScript 前端开发 UED
教你用vue自定义指令做一个组件的遮罩层loading效果
教你用vue自定义指令做一个组件的遮罩层loading效果