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

左手的ㄟ右手 2024-04-03 08:36 11阅读 0赞

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

npm install ant-design-vue@1.7.2

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

#### 3，注册登录阿里iconfont ####

[阿里巴巴矢量图标库][Link 1]

第一步，注册登录iconfont  
![在这里插入图片描述][a2be27648f93415881ae5ede1abc83ea.png]

第二步，点击进入 资源管理—我的项目  
![在这里插入图片描述][a9d42756358049449c1968e80f81ded8.png]  
第三步，新建项目  
![在这里插入图片描述][baf7d18db2fe492ca697f31c02bce33f.png]  
![在这里插入图片描述][f985efbaf79d408688e02cdcce5c9bbb.png]

第四步，搜索图标  
![在这里插入图片描述][1ef2d794f1484bc0b01e13a1c48077c1.png]  
第五步，添加图标入库  
![在这里插入图片描述][df80d52986904d6fb786ffdfb2b02e67.png]  
第六步，将购物车中收藏的图标添加到新项目中  
![在这里插入图片描述][ebc1efa5b5ff4e69b8e9667aa4bd6e27.png]

第七步，下载项目到本地  
![在这里插入图片描述][55b876f454ba469fa8a9ef0cf82822d5.png]  
第八步，将下载的文件解压后拷贝到vue项目的src下assets目录中，如下图;  
![在这里插入图片描述][d5f27cd65469437c9448c4368fa962db.png]  
![在这里插入图片描述][dcce07727f744e018bc8303e23c85a33.png]

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

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

<a-cascader
      :options="addressOptionList"
      placeholder="请选择外出地区"
      v-model="privateForm.goRegion"
      :disabled="privateForm.id ? true : false"
      @change="goRegionInputChange"                  
      >
      
      <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";
    }

[Link 1]: https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
[a2be27648f93415881ae5ede1abc83ea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/1577efc455b240c4827a2fec6883e4b6.png
[a9d42756358049449c1968e80f81ded8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/ed9a5b38618048db8d5707fe4bfe81b6.png
[baf7d18db2fe492ca697f31c02bce33f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/65fc8413332345e6aad03a0aef632b34.png
[f985efbaf79d408688e02cdcce5c9bbb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/1382d70082734624bf73375782d0d0e1.png
[1ef2d794f1484bc0b01e13a1c48077c1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/0a1307d34a9842949abe9692f8bce5bc.png
[df80d52986904d6fb786ffdfb2b02e67.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/1ca73d41b7f440dba6852dd8e5d3ca27.png
[ebc1efa5b5ff4e69b8e9667aa4bd6e27.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/d67c0cedaa7c4ff18a6ce2ca36a99448.png
[55b876f454ba469fa8a9ef0cf82822d5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/b7e9979f26fa4db7b930594fe1ad3c81.png
[d5f27cd65469437c9448c4368fa962db.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/0d0748f9fbd24f2498bf6a4e0c9fd7de.png
[dcce07727f744e018bc8303e23c85a33.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/e70a4fd31cc9402f901479ec8ee70e6b.png