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级联选择后缀图标】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。