【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-cascaderv-model:value="value1"style="margin-top: 1rem":options="options"placeholder="Please select"></a-cascader><a-cascaderv-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";
}

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

Vue 项目中引入本地第三方 JS 库
一.在 inde.html 中使用 script 标签来引入 1.直接引入,全局可用 ESLint 语法检测会报错:'$' is not define // index.html<script ...
Ant Design Vue 组件或图标的引入和使用
// 组件或图标引入 <script lang="ts">import { defineComponent, reactive, ref } from 'vue';im ...
如何在React中引入阿里图标库的图标
一.周所周知在 Antd Design 中也有一些图标,但是要找到自己想要的图标不是很方便,需要一个一个的找.而且提供的图标数量也不是很多! 而阿里图标库可以通过搜索找到自己想要的图标,图标的数量和 ...
【Android NDK 开发】NDK 交叉编译 ( Ubuntu 中交叉编译动态库 | Android Studio 中配置使用第三方动态库 )
文章目录 I . 动态库与静态库 II . 编译动态库 III. Android Studio 使用第三方动态库 IV . Android Studio 关键代码 V . 博客资源 I . 动态库 ...
同一页面中引入多个JS库产生的冲突解决方案(转)
发生JS库冲突的主要原因:与jQuery库一样,许多JS库都使用'$'符号作为其代号.因此在一个页面中引入多个JS库,并且使用'$'作为代号时,程序不能识别其代表哪个库(这个是我自己的解释,但更深的原 ...
[react] 怎么在React中引入其它的UI库，例如Bootstrap
[react] 怎么在React中引入其它的UI库,例如Bootstrap react-bootstrap是一个非常受欢迎的针对react封装过的bootstrap,它本身不包含css,所以也是需要使 ...
vue3+ant design vue+ts实战【ant-design-vue组件库引入】
vue3 UI组件库 Ant Design of Vue Ant Design Vue
ant design vue table 高度自适应_Vue组件库大评测 Element, iView, HeyUI, Ant Design Vue
今天偶然的机会想了解下其他Vue相关的组件库,网上刚好有文章,顺便自己做一下笔记,算是资源整理吧 .好了,话不多说,直接开始: 组件库的选择对于前端开发有者至关重要的影响,而组件的丰富性以及健壮性是我 ...
Vue3 UI组件库对比，Naive UI、Element Plus、 Ant Design Vue
对比图 \ Element Plus Naive ui Ant Design Vue 简介 element-ui Vue3版本,国内使用广泛 Vue作者推荐的Vue3ui 组件库阿里Ant Desi ...

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

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

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

3，注册登录阿里iconfont

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

最新文章

热门文章