文章目录
- 对移动端支持区别
- 框架区别
- 开发中使用的区别
- 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
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>
在element-ui中的dialog有 :visible.sync属性 可进行父子组件之间的双向绑定(vue2写法)
具体的写法为:
//子组件
<el-dialog
:visible.sync="isShow">
</el-dialog>
需要在computed中进行告知操作
computed: {
isShow: {
get () {
return this.visible;
},
set (val) {
this.$emit('update:visible', val);
}
}
}
在props传值的时候
props:{
//控制弹窗的展示喝隐藏
visible:{
type:Boolean,
default:false
}
}
vue3中 的写法为
<el-dialog
:model-value="visible"
:before-close="handleClose">//要用:model-value不用v-model v-model报错有坑
</el-dialog>
在props接受父组件传来的值
props: {
visible: {
type: Boolean,
default: false
}
}
在setup中
setup(props,context){
const methods = {
handleClose(){
context.emit('update:visible', false)
}
}
}
el-button
<!-- element -->
<el-button type="text" @click="rowAdd(scope)">新增</el-button>
<!-- element-plus -->
<el-button type="primary" link @click="rowAdd(scope)">新增</el-button>
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>
el-icon
<!-- element -->
<i class="el-icon-edit"></i>
<!-- element-plus -->
<el-icon><component is="el-icon-edit" /></el-icon>
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时会报错
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>
组件的插槽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>
新增组件
- Skeleton-骨架屏
- Empty-空状态
- Affix -固钉
- TimeSelect 时间选择
- Space 间距
来源
Element-ui和Element-Plus的区别_Element2和Element3的区别
关于element-plus(vue3)和element-ui(vue2)两个ui框架的不同和使用区别(持续更新)
element和element-plus使用区别