【前端】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使用区别