【前端】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

   // element
    // element-plus

el-dialog

  
    
      取 消
      保 存
  

  


  
      
          取 消
          确 定

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

具体的写法为：

//子组件

需要在computed中进行告知操作

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

在props传值的时候

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

vue3中 的写法为

//要用：model-value不用v-model v-model报错有坑

在props接受父组件传来的值

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

在setup中

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

el-button


   新增

   新增

el-date-picker

el-icon

echarts

//引入

import echarts from 'echarts'
this.chart = echarts.init(document.getElementById('echarts-wrap'));

import * as echarts from 'echarts';
let chart = echarts.init(document.getElementById('echarts-wrap'));

不用响应式变量来获取echarts元素： 因为前者切换legend时会报错

Icon图标库变化了

新版本的图标库使用方式

组件的插槽slot使用变化了

同时可支持多个插槽

在这里插入图片描述

 
   
 
 
 {{ item.value }}
 {{ item.address }}

新增组件

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

来源

Element-ui和Element-Plus的区别_Element2和Element3的区别

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

element和element-plus使用区别

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/181bf7b97f.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐