首页 前端知识 【前端】Element-UI和Element-Plus的区别

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

2024-06-03 12:06:01 前端知识 前端哥 329 22 我要收藏

文章目录

  • 对移动端支持区别
  • 框架区别
  • 开发中使用的区别
    • 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使用区别

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10652.html
标签
element-plus
评论
发布的文章

vue学习计划

2024-06-08 18:06:08

fastjson1.2.24-RCE漏洞复现

2024-06-08 09:06:33

JsonPath用法详解

2024-06-08 09:06:55

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!