Vue3+TS使用element-plus 动态Icon图标
2021-11-29 09:30
363 查看
[TOC]
1,前言
源于一段话
Element Plus 团队正在将原有组件内的 Font Icon 向 SVG Icon 迁移,请多多留意更新日志, 及时获取到更新信息,Font Icon 将会在第一个正式发布被废弃,请尽快迁移
在此记录一下如何使用element-plus中的icon组件
环境:
- Vue:3.2.16
- Element-Plus:1.2.0-beta.3
- TypeScript:4.4.3
- Vite:2.6.4
2,使用
文档原话:如果你想像用例一样直接使用,你需要全局注册组件,才能够直接在项目里使用
在
main.ts中先导入
import * as Icons from '@element-plus/icons'
2.1,方式一
在
main.ts中
import { createApp } from 'vue' import App from './App.vue' import router from './router' import { store, key } from './store' import * as Icons from '@element-plus/icons' const app = createApp(App) app.use(store, key) app.use(router) app.mount('#app') // 注册全局组件 Object.keys(Icons).forEach(key => { app.component(key, Icons[key as keyof typeof Icons]) })
在
xxx.vue文件中
// html <template> <el-icon :size="20"><alarm-clock /></el-icon> </template>
或使用动态组件
// html <template> <component class="xxx" :is="iconName"></component> </template>
// script export default { name: 'Login', setup() { const iconName = 'Search' return { iconName } } }
2.2,方式二
在
main.ts中
import { createApp, createVNode } from 'vue' import App from './App.vue' import router from './router' import { store, key } from './store' import * as Icons from '@element-plus/icons' const app = createApp(App) app.use(store, key) app.use(router) app.mount('#app') // 创建Icon组件 const Icon = (props: { icon: string }) => { const { icon } = props return createVNode(Icons[icon as keyof typeof Icons]) } // 注册Icon组件 app.component('Icon', Icon)
使用动态组件
// html <template> <Icon class="xxx" :icon="iconName"></Icon> </template>
// script export default { name: 'Login', setup() { const iconName = 'Search' return { iconName } } }
如果看了觉得有帮助的,我是@鹏多多,欢迎 点赞 关注 评论;END
PS:在本页按F12,在console中输入document.querySelectorAll('.diggit')[0].click(),有惊喜哦
公众号
往期文章
- 助你上手Vue3全家桶之Vue-Router4教程
- 助你上手Vue3全家桶之Vue3教程
- 助你上手Vue3全家桶之VueX4教程
- 使用nvm管理node.js版本以及更换npm淘宝镜像源
- 超详细!Vue-Router手把手教程
- vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令
- 微信小程序实现搜索关键词高亮
- 超详细!Vue的九种通信方式
- 超详细!Vuex手把手教程
个人主页
相关文章推荐
- Android中动态更换App的桌面icon图标和activity-alias的使用
- 使用ICON动态修改exe文件图标
- ElementUI使用问题记录:设置路由+iconfont图标+自定义表单验证
- 使用C++builder的TTrayIcon制作系统托盘动态图标和气泡提示
- Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
- 在Firefox下显示动态icon图标
- WPF 4 动态覆盖图标(Dynamic Overlay Icon)
- 安卓中如何使用iconfont字体图标
- 使用C#从图片文件生成图标ICON文件(附源文件)
- 做小图标还用sprite图?你out了!史上最简单易懂iconfont使用教程
- Winfrom中如何使用Iconfont字体图标补充
- iconfont字体图标的使用方法
- Flex动态改变按钮图标(icon)
- 如何在HTML中使用图标字体 - icon font?
- 如何使用IconFont字体图标代替网页图片?
- Iconfont 图标库在Android项目中的使用
- 在iOS开发中使用iconfont图标
- Android利用activity-alias动态更新图标icon,标题label
- iconfont字体图标的使用
- 背水一战 Windows 10 (45) - 控件(图标类): IconElement, SymbolIcon, FontIcon, PathIcon, BitmapIcon