element-plus的el-icon和@element-plus/icons vue3 组件封装与使用

使用 element-plus 时发现了一个问题：icon 需要单独安装和引入，让我很是难受，官网是这么说的（大概意思如下）：

$ yarn add @element-plus/icons
# 或者
$ npm install @element-plus/icons

import { defineComponent } from 'vue'
import { Edit, Share, Delete, Search } from '@element-plus/icons'
export default defineComponent({ components: { Edit, Share, Delete, Search }
})

<template> <div style="font-size: 20px;"> <!-- Since svg icons do not carry any attributes by default --> <!-- You need to provide attributes directly --> <el-icon size="1em"><edit /></el-icon><el-icon size="1em"><share /></el-icon> <el-icon size="1em"><delete /></el-icon> <el-icon size="1em"><search /></el-icon> </div>
</template>

........................................................................ 说真的，我一万个难受

这玩意不能忍，之前看到 vant 的 icon 做的就很舒服

<van-icon name="chat-o" />

既然这样，那封装一个组件吧

element团队的意思很明显，就是按需加载

那咱们就退而求其次，一次加载完，在src/目录下创建plugins(如果已有的兄弟姐妹请无视)

然后，在这个文件夹中引入 icons 所有组件，并且全部注册进去

import * as Icons from '@element-plus/icons'
export default (app) => {for (const key in Icons) {app.component(transElIconName(key), Icons[key])   }
} // 此处是借鉴（抄袭）一位大佬的写法，勿喷
// https://blog.csdn.net/Alloom/article/details/119415984
function transElIconName(iconName) {return 'vue' + iconName.replace(/[A-Z]/g, (match) => '-' + match.toLowerCase())
}

然后在main.js文件内注册

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// code ...
// 使用
icons elementPlusIcons(app)

然后核心的部分来了：

在components文件夹中创建一个组件（组件名字随便取），我这里暂且叫HyIcon

这里核心的方法是 vue3 的新方法 resolveComponent，根据组件名动态引入已加载的组件，具体请参照：全局 API | Vue.js

<script>
import { h, resolveComponent, defineComponent } from 'vue'
export default defineComponent({props: {name: {type: String,required: true}},render() {return <el-icon {...this.$attrs}>{h(resolveComponent(this.name))}</el-icon>}})
</script>

引入方法如下：

1. 全局引入(main.js)

import { createApp } from 'vue'
import App from './App.vue'
import HyIcon from '@/components/HyIcon'
const app = createApp(App)
// code ...
// 使用icons
elementPlusIcons(app)
app.component('HyIcon', HyIcon)

2. 局部引入（具体组件）：

<template><hy-icon size="100" color="red" name="vue-add-location" />
</template>
<script>
import { defineComponent, defineAsyncComponent } from 'vue'
export default defineComponent({components: {HyIcon: defineAsyncComponent(() => import('@/components/HyIcon'))}})
</script>

上面用到了 vue 的 defineAsyncComponent 方法

也可以这么用：

<template><hy-icon size="100" color="red" name="vue-add-location" />
</template>
<script>
import { defineComponent, defineAsyncComponent } from 'vue'
import { HyIcon } from '@/components/HyIcon'
export default defineComponent({components: { HyIcon }
})
</script>

完成

如果小伙伴们有好点的建议或者意见，可以提给我，我会及时改进，欧了，古德拜！

element-plus的el-icon和@element-plus/icons vue3 组件封装与使用相关推荐

【vue3组件封装】Icon图标组件
使用 <s-icon icon="icon-file"/> 准备图标这里使用的icon均自于https://www.iconfont.cn/,它是支持unicode. ...
[Element Migrating][ElInput][Attribute]: icon is removed, use suffix-icon / prefix-icon instead.
Chrome控制台如下: [Element Migrating][ElInput][Attribute]: icon is removed, use suffix-icon / prefix-icon ...
element label动态赋值_基于Element封装可拖动放大缩小的弹窗
ElementUI 自带的对话框组件(el-dialog)没有拖动和最小化的处理,目前业务遇到呼叫弹屏处理,基于el-dialog 再次进行封装下,上篇文章有人说图片换成代码就好了,下面代码部分我就直 ...
【Android 插件化】Hook 插件化框架 ( 合并 “插件包“ 与 “宿主“ 中的 Element[] dexElements | 设置合并后的 Element[] 数组 )
Android 插件化系列文章目录 [Android 插件化]插件化简介 ( 组件化与插件化 ) [Android 插件化]插件化原理 ( JVM 内存数据 | 类加载流程 ) [Android 插件 ...
《微信小程序-进阶篇》组件封装-Icon组件的实现（一）
大家好,这是小程序系列的第九篇文章,从这篇开始我们将进入提高篇,在这一个阶段,我们的目标是可以较为深入的了解组件化开发,并且实践积累一些后续项目也就是原神资料站中用得着的组件: 1.<微信小程序 ...
如何使用Element Plus 提供的Icon图标库
文章目录前言一.安装二.使用 1.引入需要的图标 2.页面效果 3.还有一个奇怪的问题总结前言用vue3开发的时候,使用element-plus UI组件库的时候,发现不能像之前vue2时 ...
element ui icon 图标 element icon 图标 element图标
参考以下地址, 个人开发网站,内容来自element-ui官网更新时间 2020年12月31日20:42:35 http://47.98.224.252:8082/tools?activeName= ...
修改Element el-select右边的icon图标
.el-select .el-input .el-select__caret.el-input__icon::before {content: "\e790";position: ...
element ui走马灯怎么添加_Lovestu - Element UI 走马灯高度自适应
Element UI走马灯中,通过属性height来设置高度,但是设置就是死的,不能自适应.要自适应需要监控窗口宽度的变化. 网上别人分享的太复杂了,这儿有简单的方法实现高度自适应. 首先,确定图片的 ...
element ui分页怎么做_Vue Element分页器
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>分页& ...

element-plus的el-icon和@element-plus/icons vue3 组件封装与使用

element-plus的el-icon和@element-plus/icons vue3 组件封装与使用相关推荐

最新文章

热门文章