【前端】Element-UI和Element-Plus的区别

文章目录

• 对移动端支持区别
• 框架区别
• 开发中使用的区别
• • el-table
  • el-dialog
  • el-button
  • el-date-picker
  • el-icon
  • echarts
  • Icon图标库变化了
  • 组件的插槽slot使用变化了
  • 新增组件
• 来源

对移动端支持区别

Element-UI对应Element2：基本不支持手机版

Element-Plus对应Element3：组件布局考虑了手机版展示

框架区别

Element-ui适用于Vue2框架

Element-plus适用于Vue3框架

开发中使用的区别

el-table

<template slot-scope="scope"></template> // element <template #default="scope"></template> // element-plus

• 1
• 2

el-dialog

<!-- element --> <span slot="footer" class="dialog-footer"> <el-button @click="_cancel">取 消</el-button> <el-button type="primary" @click="save">保 存</el-button> </span> <el-dialog :visible="dialogVisible"></el-dialog> <!-- element-plus --> <template #footer> <span class="dialog-footer"> <el-button @click="_cancel">取 消</el-button> <el-button type="primary" @click="save">确 定</el-button> </span> </template> <el-dialog v-model="dialogVisible"></el-dialog>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

在element-ui中的dialog有 :visible.sync属性 可进行父子组件之间的双向绑定（vue2写法）
具体的写法为：

//子组件 <el-dialog :visible.sync="isShow"> </el-dialog>

• 1
• 2
• 3
• 4
• 5

需要在computed中进行告知操作

computed: { isShow: { get () { return this.visible; }, set (val) { this.$emit('update:visible', val); } } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

在props传值的时候

props:{ //控制弹窗的展示喝隐藏 visible:{ type:Boolean, default:false } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7

vue3中 的写法为

<el-dialog :model-value="visible" :before-close="handleClose">//要用：model-value不用v-model v-model报错有坑 </el-dialog>

• 1
• 2
• 3
• 4
• 5

在props接受父组件传来的值

props: { visible: { type: Boolean, default: false } }

• 1
• 2
• 3
• 4
• 5
• 6

在setup中

setup(props,context){ const methods = { handleClose(){ context.emit('update:visible', false) } } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7

el-button

<!-- element --> <el-button type="text" @click="rowAdd(scope)">新增</el-button> <!-- element-plus --> <el-button type="primary" link @click="rowAdd(scope)">新增</el-button>

• 1
• 2
• 3
• 4

el-date-picker

<!-- element --> <el-date-picker class="delay-times-picker dia-ipts" v-model="ruleForm.releaseTime" :picker-options="pickerBeginDateBefore" default-time="00:00:00" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择发布时间"> </el-date-picker> <!-- element-plus --> <el-date-picker v-model="ruleForm.releaseTime" :disabled-date="pickerBeginDateBefore" :default-time="new Date(0,0,0,0,0,0)" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择发布时间"> </el-date-picker>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

el-icon

<!-- element --> <i class="el-icon-edit"></i> <!-- element-plus --> <el-icon><component is="el-icon-edit" /></el-icon>

• 1
• 2
• 3
• 4

echarts

//引入 <!-- v2 --> import echarts from 'echarts' this.chart = echarts.init(document.getElementById('echarts-wrap')); <!-- v3 --> import * as echarts from 'echarts'; let chart = echarts.init(document.getElementById('echarts-wrap')); 不用响应式变量来获取echarts元素： 因为前者切换legend时会报错

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

Icon图标库变化了

新版本的图标库使用方式

<template> <div> <el-icon :size="size" :color="color"> <edit></edit> </el-icon> <!-- Or use it independently without derive attributes from parent --> <edit></edit> <el-icon><copy-document /></el-icon> </div> </template>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

组件的插槽slot使用变化了

同时可支持多个插槽

<el-autocomplete popper-class="my-autocomplete" v-model="state" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect" > <template #suffix> <i class="el-icon-edit el-input__icon" @click="handleIconClick"> </i> </template> <template #default="{ item }"> <div class="name">{{ item.value }}</div> <span class="addr">{{ item.address }}</span> </template> </el-autocomplete>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

新增组件

• Skeleton-骨架屏
• Empty-空状态
• Affix -固钉
• TimeSelect 时间选择
• Space 间距

来源

Element-ui和Element-Plus的区别_Element2和Element3的区别
关于element-plus(vue3)和element-ui(vue2)两个ui框架的不同和使用区别（持续更新）
element和element-plus使用区别