09vue3实战-----引入element-plus组件库中的图标

09vue3实战-----引入element-plus组件库中的图标

element-plus中的icon图标组件的使用和其他平台组件(如el-button按钮)是不一样的。

1.安装

javascript 复制代码
npm install @element-plus/icons-vue

2.引入

在这我们只讲述最方便的一种引入方法------完整引入。这需要从@element-plus/icons-vue 中导入所有图标并进行全局注册

main.ts:

javascript 复制代码
// 如果您正在使用CDN引入,请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
//循环遍历图标组件数组
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

3.优化

在大型项目中,经常需要注册各类组件库或者插件。如果把代码都写在main.ts,当项目很大时候可能该文件会比较复杂。可以把上述注册所有图标组件的代码抽离成一个文件来解决该问题。

新建global文件夹,在此基础上新建一个ts文件来注册图标组件:

register-icons.ts:

javascript 复制代码
import type { App } from 'vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

function registerIcons(app: App<Element>) {
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
  }
}

export default registerIcons;

上面的代码中需要注意registerIcons函数中传入的app,需要知道app的类型。自从使用了ts之后,相信很多人都对很多比较复杂的对象的类型不是清楚,比如这里的app。我们可以ctrl+鼠标左键点击main.ts文件中的createApp进入源码。

再ctrl+鼠标左键点击CreateAppFunction:

发现该函数为App类型,而且带有一个泛型。所以此处的代码如下:

然后再main.ts中注册:

javascript 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import registerIcons from './global/register-icons'

const app = createApp(App)
app.use(registerIcons)

app.mount('#app')
相关推荐
万少16 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL22 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl0238 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang39 分钟前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼42 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿44 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再1 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5551 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录1 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空00001 小时前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试