element ui plus，element-plus

大家好，关于element ui plus很多朋友都还不太明白，不过没关系，因为今天小编就来为大家分享关于element-plus的知识点，相信应该可以解决大家的一些困惑和问题，如果碰巧可以解决您的问题，还望关注下本站哦，希望对各位有所帮助！

elementui和elementplus区别

组件库体积大小，组件库更新频率。

1、elementui和elementplus的主要区别在于体积大小：elementui是第一代的组件库，体积相对较大，因为elementui包含了许多不同的组件和功能。而elementplus是elementui的升级版，elementplus体积相对更小，elementplus剔除了一些不常用的组件，同时还新增了一些新的组件和功能。

2、elementplus相对于elementui有更高的更新频率：elementui的代码库相对较大，elementui的维护和更新需要更多的时间和人力。elementplus是在elementui的基础上进行的升级和改进，elementplus代码库相对较小，elementplus可以更快地进行更新和维护。

Element Plus,一个功能强大的界面库

Element Plus是一个基于 Vue 3的现代 UI组件库，提供丰富的预构建组件，帮助开发者快速搭建美观且功能完善的网页应用。

一、Element Plus核心特性组件类型丰富覆盖按钮、表单、弹窗、表格等高频使用场景，例如：

按钮：支持 primary（蓝色）、success（绿色）、danger（红色）等类型，通过 type属性快速切换样式。

表单：包含输入框（el-input）、单选框、复选框、开关等，支持密码框、清除按钮等扩展功能。

弹窗：通过 el-dialog实现提示框、对话框，使用 v-model:visible控制显示/隐藏。

表格：el-table支持数据排序、筛选、分页，通过 el-table-column定义列属性（如 prop="name"绑定数据字段）。

设计优势

开箱即用：组件样式经过专业设计，无需额外美化即可呈现统一、美观的界面。

高度可定制：支持通过 CSS变量或覆盖默认样式实现个性化设计，例如修改主题色、调整间距等。

响应式布局：组件默认适配不同屏幕尺寸，确保在移动端和桌面端均能良好展示。

二、为什么选择 Element Plus？开发效率显著提升直接调用预构建组件，避免从零编写按钮、表单等基础元素，可将开发周期缩短 50%以上。例如，实现一个带分页的表格仅需配置 el-table和 el-pagination，无需手动处理 DOM操作或样式。

功能完整性覆盖 90%以上前端开发需求，包括：

高级组件：如日期选择器（el-date-picker）、上传组件（el-upload）、树形控件（el-tree）等。

国际化支持：内置多语言配置，可快速适配全球化项目。

无障碍访问：符合 WAI-ARIA标准，提升残障用户使用体验。

生态与社区支持

活跃的开源社区：GitHub星标数超 20k，定期更新版本并修复漏洞。

详细文档：提供组件示例、API说明和常见问题解答，新手可快速上手。

插件扩展：支持与 Vue Router、Vuex等库无缝集成，扩展功能边界。

三、使用流程与代码示例安装通过 npm或 yarn安装：

npm install element-plus#或yarn add element-plus全局引入在 main.js中配置：

import{ createApp} from'vue';import App from'./App.vue';import ElementPlus from'element-plus';import'element-plus/dist/index.css';//引入样式文件const app= createApp(App);app.use(ElementPlus);app.mount('#app');按需引入（优化性能）使用 unplugin-vue-components自动按需加载组件：

// vite.config.js或 webpack配置中添加插件import Components from'unplugin-vue-components/vite';import{ ElementPlusResolver} from'unplugin-vue-components/resolvers';export default{ plugins: [ Components({ resolvers: [ElementPlusResolver()],}), ],};组件使用示例

表单与按钮组合：

<template><el-form:model="form"><el-form-item label="用户名"><el-input v-model="form.username" placeholder="请输入用户名"/></el-form-item><el-form-item><el-button type="primary"@click="submitForm">提交</el-button></el-form-item></el-form></template><script setup>const form= reactive({ username:''});const submitForm=()=>{ console.log('表单数据：', form);};</script>动态表格：

<template><el-table:data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" sortable/><el-table-column prop="name" label="姓名"/><el-table-column prop="address" label="地址"/></el-table></template><script setup>const tableData= [{ date:'2023-01-01', name:'张三', address:'北京市'},{ date:'2023-01-02', name:'李四', address:'上海市'},];</script>四、适用场景与限制适用场景

企业级后台系统：如 CRM、ERP、数据看板等，需快速构建复杂表单和表格。

中台产品：如工作流、审批系统，依赖标准化组件保证一致性。

快速原型开发：通过组合组件验证产品逻辑，降低初期开发成本。

限制

设计灵活性：高度定制化需求可能需要覆盖较多默认样式，增加维护成本。

包体积：全局引入时体积较大（约 500KB），建议通过按需引入优化。

Vue版本依赖：仅支持 Vue 3，Vue 2项目需使用 Element UI。

五、总结Element Plus通过模块化组件、专业化设计和完善的生态，成为 Vue 3生态中最具竞争力的 UI库之一。对于追求开发效率与界面品质的团队，它是理想的选择；而对于需要深度定制的项目，可通过组合使用 Element Plus与自定义组件实现平衡。建议新手从官方文档的「快速上手」章节开始实践，逐步掌握高级功能。

Vue3+ElementPlus使用svg加载iconfont的解决方案

ElementUI作为一款优秀的开源组件库，想必很多人都使用过，在Vue3中，我们需要使用ElementPlus。ElementPlus有很多好用的组件，详细用法可直接去查看官方文档：ElementPlus。本文主要介绍如何在Vue3+ElementPlus的项目中，使用自己封装的svg图标。

安装依赖由于我们是Vue3项目，可以使用vite来快速创建一个Vu3项目：

npminstall-gyarnyarncreatevitemy-vue-app--templatevue//这里我们使用vue模板，默认是Javascript语法，如果需要ts语法则需要指定模板为vue-tscdmy-vue-appyarnyarndev

创建好项目后，我们再来引入ElementPlus，安装并引入的过程如下：

安装：

yarnaddelement-plus

完整引入：

//main.js...importElementPlusfrom'element-plus'import'element-plus/dist/index.css'app.use(ElementPlus)

引入后，我们就可以在Vue3项目中使用了：

<template><el-button>按钮</el-button></template>

ElementPlus使用Icon会比ElementUI稍微麻烦点。首先我们需要安装Icon的依赖：

yarnadd@element-plus/icons-vue

我们在main.js中注册所有的图标，当然也可以按需引入图标：

//main.js//全局引入import*asElementPlusIconsVuefrom'@element-plus/icons-vue'...for(const[key,component]ofObject.entries(ElementPlusIconsVue)){app.component(key,component)}

el-icon的使用：

<template><el-icon><Edit/></el-icon></template><scriptsetup>//import{Edit}from'@element-plus/icons-vue'//按需引入，如果已经全局引入了就不需要按需引入</script>

ElementPlus的el-icon使用的是svg，这与ElementUI使用的类名有很大的不同，也就是说我们无法直接在el-icon中使用iconfont的图标。虽然ElementPlus的图标已经能满足大部分场景的需求，但是一些特殊场景只能从iconfont或者自定义的图标上获取。

那么有没有办法将iconfont封装成svg，并给el-icon调用呢？

将iconfont封装成svg可缩放矢量图形（ScalableVectorGraphics），简称SVG，是一种基于XML的，可用于描述二维的矢量图形。SVG可以优雅而简洁的渲染不同大小的图形，并且可以被无限缩放并且保持不失真或者降低质量，这一特性比JPEG、PNG等好用太多。SVG的内容相当多，感兴趣的可以去MDN上查看文档：SVG。我们这里只是简单实用SVG来封装iconfont。

首先我们新建一个SvgIcon.vue的文件，

<template><svg:class="classList"aria-hidden="true"><use:xlink:rel="external nofollow" href="iconName":fill="color"/></svg></template><scriptsetup>import{computed}from'vue';constprops=defineProps({className:{type:String,default:''},iconClass:{type:String,required:true},color:{type:String,default:'#409eff'},size:{type:String,default:'20px'}})constclassList=computed(()=>{return['icon',props.className||'']})consticonName=computed(()=>{return`#${props.iconClass}`})</script><stylescoped>.icon{/*v-bind是Vue3才支持的功能，可以将CSS的值与js的值绑定*/width:v-bind('props.size');height:v-bind('props.size');position:relative;vertical-align:-2px;fill:currentColor;}</style>

这样就将iconfont封装成了svg来调用了，这里我们重点说几个属性：

aria-hidden：默认为false，设置为true表示会把整个元素包括子元素从可访问树（AOM）上移除，但是在DOM树上还是存在的

xlink:href：use元素的属性

v-bind：Vue3的特性，可用于关联CSS和js

fill：如果在动画接收还需要保持动画的值，可用于设置颜色

如何使用使用已经封装好的SvgIcon.vue比较简单，就和正常的组件一样使用即可。例如：

<template><SvgIcon:icon-class="icon-pointer"></SvgIcon></template><scriptsetup>importSvgIconfrom'./SvgIcon.vue'</sript>

如果不想在局部注册组件，也可以注册为全局组件：

//main.jsimportSvgIconfrom'@/SvgIcon.vue'...app.component('SvgIcon',SvgIcon);

作为SVG组件，我们也可以直接使用在el-icon中，这样就可以添加任意iconfont到el-icon中了：

yarnaddelement-plus0

按理说到这里，本篇教程就应该结束了。但是，在使用的过程中，按照正常的方式设置的hover样式不生效，笔者尝试了几种方案，最终放弃hover，采用监听鼠标事件的方式解决。

设置”hover“样式SVG不同于class样式，其无法直接通过修改hover样式来设置鼠标悬浮在图标上面时颜色改变，这个时候我们就需要换一种思路了。我们在SvgIcon.vue中传入了color，并且通过fill将color作用到SVG上，因此我们可以在父组件中修改color的值来实现"hover"效果。

yarnaddelement-plus1

上面的例子中适用于单个SvgIcon，如果是多个的话，就需要进一步改造了：

yarnaddelement-plus2

对比来看，其实也不复杂。

为什么图标颜色无法修改？可能有点朋友按照上述的步骤操作后，发现并不能修改图标颜色，如果不是代码有误，那应该就是导入的iconfont有问题。一般我们会直接在iconfont官网下载图标：

将下载好的压缩包解压后，只复制iconfont.js到项目中即可：

yarnaddelement-plus3

我们来看一下iconfont.js中icon-close1和icon-close的源码：

可以发现，这两个图标最大的差别就是一个有fill，另一个没有，而这就是问题的关键。如果某一个图标的fill不为空，那么作为svg引用时将无法修改填充色。

举个例子：

yarnaddelement-plus4

运行结果：

遇到这个问题应该怎么解决呢，一种方式就是手动删除所有Icon的fill属性，另一个就是在iconfont上面使用批量去色。

批量去色后，我们再次下载图标，并解压后替换掉原来的iconfont.js，再去源码看看就会发现所有图标的fill都没有了，而且也可以修改颜色。

总结本文详细介绍了如何在ElementPlus中使用iconfont，简单的说就是要将其封装成SVG，并且支持动态修改颜色。虽然操作上不难，但是容易踩一些坑，你学会了吗？

原创不易，转载请注明出处

原文：

如果你还想了解更多这方面的信息，记得收藏关注本站。