动态引入 antDesign 的图标,并注册为组件

news/2024/11/8 2:45:48/

1、需要安装 @ant-design/icons-vue 图标组件包

npm install --save @ant-design/icons-vue

2、引入antDesign的图标库

在main.js中
import * as antIcons from '@ant-design/icons-vue'// 将antDesign图标库的所有图标,每个都注册成组件
Object.keys(antIcons).forEach(key => {app.component(key, antIcons[key])
})

3、在别的组件中使用

<component :is="item.meta.icon"/>
这个 item.meta.icon 就是 meta中的icon,
这就看你怎么用了,这里随意了就export const asyncRouterMap = [{...children: [{path: '/systemOverview/dashboard/DashBoardIndex',component: () => import('@/views/systemOverview/dashboard/DashBoardIndex.vue'),name: 'dashboard',meta: {title: '仪表盘',icon: "UserOutlined",keepAlive: true,}},{path: '/systemOverview/dataCenter/dataCenter',component: () => import('@/views/systemOverview/dataCenter/dataCenter.vue'),name: 'dataCenter',meta: {title: '数据中心',icon: 'VideoCameraOutlined',keepAlive: true,}},]},{path: '/progressBar/ProgressBarIndex',component: () => import('@/views/progressBar/ProgressBarIndex.vue'),name: 'progressBar',meta: {title: '进度条',icon: 'MenuUnfoldOutlined',keepAlive: true,}},{path: '/virtual/VirtualIndex',component: () => import('@/views/virtual/VirtualIndex.vue'),name: 'virtual',meta: {title: '虚拟列表',icon: 'MenuFoldOutlined',keepAlive: true,}}
]

http://www.ppmy.cn/news/485306.html

相关文章

【FPGA入门】第六篇、异步串口通信

目录 第一部分、相关知识 1、UART和RS232的区别 2、UART与USART的区别 3、全双工&#xff1f; 4、RS232通信协议 5、波特率 6、如何将外部异步信号变为内部同步信号&#xff1f; 7、什么时间点让FPGA去采集rx线上的数据&#xff1f; 第二部分、串口通信时序图 1、…

node 跟踪异步资源(回调)async_hook、AsyncResource

文章目录 跟踪异步回调的原因异步调用链基础async_hookAsyncResourceasyncResource.runInAsyncScope 跟踪异步回调的原因 node 基于事件循环的异步非阻塞 I/O 模型&#xff0c;发起一次异步调用&#xff0c;回调在之后的循环中才被调用&#xff0c;此时已经无法追踪到是谁发起…

vue中 @scroll的使用

@scroll 是 Vue 中的一个修饰符,可以用来监听元素的滚动事件。 使用方法: 在元素上绑定一个 @scroll 修饰符,并绑定一个事件处理函数,如:<template><div class="container" @scroll="handleScroll"></div> </template><sc…

Vue点击上下滑动滚屏

上滑到顶部 绑定点击事件&#xff1a; <div class"totop"><a click"backTop()" size"50" v-show"tabshow" class"btn btn-default"><span class"fa"></span></a></div> 点…

无缝滚动:vue-seamless-scroll

1、安装 npm install vue-seamless-scroll --save2、注册 // 方法一&#xff1a;main.js中全局注册 import vueSeamlessScroll from vue-seamless-scroll Vue.use(vueSeamlessScroll)// 方法二&#xff1a;局部注册 import vueSeamlessScroll from vue-seamless-scroll expor…

vue:使用vuescroll

1、npm下载 npm install vuescroll -S 官网&#xff1a;https://vuescrolljs.yvescoding.org/zh/ <template><div><vuescroll :ops"ops"><div class"container"><ul v-for"(item, index) in 100" :key"index&q…

vue 简单的tab切换滑动效果

实现一个简单的滑动效果&#xff1a; 代码逻辑比较简单&#xff0c;利用css的transform和transition属性实现简单的tab切换效果 贴上代码&#xff0c;仅供参考&#xff1a; html部分&#xff1a; <template><div class"container"><div class"…

【Vue实用功能】Vue中实现移动端的scroll滚动

Vue中实现移动端的scroll滚动 介绍&#xff1a; 在移动端或PC&#xff0c;页面的部分内容需要我们让其在页面滚动&#xff0c;这时候我们都会使用::-webkit-scrollbar来修饰原生滚动条&#xff0c;这样会影响滚动条对宽度的检测&#xff0c;所有就有了该组件&#xff0c;不需要…