[Element Migrating][ElDialog][Attribute]: size is removed解决方案

打开控制台，发现如下警告：

解释：

在El-ement中使用了el-Dialog，其中的size需要删除

找到以前写的代码页面，发现了el-Dialog确实存在size的属性（下面是部分）：

<el-dialog
      title="查看司机交款单"
      :visible.sync="isshow"
      size="large"
      :close-on-click-modal="false"
      show-close
      :before-close="handleClose"
    >
      <div class="box">
        <div class="header">
          <div class="header_l">
            <div>
            <div><span>交款日期：</span>{{ row1.createTime||'' }}</div>
            <div><span>收款日期：</span>{{ row1.deliveryDate||'' }}</div>
          </div>
          <div>
            <div><span>司机名称：</span>{{ row1.driverName||'' }}</div>
            <div><span>车辆：</span>{{carName||'' }}</div>
          </div>
          <div>
            <div><span>交款单号：</span>{{ row1.sheetNo||'' }}</div>
            <div><span>未提交订单：</span>{{ row1.notSubmitNumber||''}}</div>
          </div>
          </div>

解决方案：

下面是官方的文档展现的属性：

但是并未发现size的这个属性，elment-ui新版本已经废弃该属性 ！！

参数	说明	类型	可选值	默认值
visible	是否显示 Dialog，支持 .sync 修饰符	boolean	—	false
title	Dialog 的标题，也可通过具名 slot （见下表）传入	string	—	—
width	Dialog 的宽度	string	—	50%
fullscreen	是否为全屏 Dialog	boolean	—	false
top	Dialog CSS 中的 margin-top 值	string	—	15vh
modal	是否需要遮罩层	boolean	—	true
modal-append-to-body	遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上	boolean	—	true
append-to-body	Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true	boolean	—	false
lock-scroll	是否在 Dialog 出现时将 body 滚动锁定	boolean	—	true
custom-class	Dialog 的自定义类名	string	—	—
close-on-click-modal	是否可以通过点击 modal 关闭 Dialog	boolean	—	true
close-on-press-escape	是否可以通过按下 ESC 关闭 Dialog	boolean	—	true
show-close	是否显示关闭按钮	boolean	—	true
before-close	关闭前的回调，会暂停 Dialog 的关闭	function(done)，done 用于关闭 Dialog	—	—
center	是否对头部和底部采用居中布局	boolean	—	false
destroy-on-close	关闭时销毁 Dialog 中的元素	boolean	—	false

 可在全局搜索查询el-dialog是否存在 size的属性，然后删除就可以了。

 为啥不需要这个属性了？

在 Element UI（element-plus）更新迭代到 2.x 之后，el-dialog 组件的 size 属性已经被废弃。这是因为，size 属性主要用于调整 el-dialog 的尺寸大小，而在实际使用过程中， size 很难满足实际需求（例如合适的缩放比例等），这也是该属性被废弃的主要原因之一。

在 Element UI（element-plus）2.x 版本里，el-dialog 的 height 和 width 属性已经可以自由控制弹窗大小，因此就没有必要继续支持 size 属性了。相对于 size 属性，height 和 width 属性更加灵活，可以更加精确地指定 el-dialog 的大小，实现更好的视觉效果。

 使用举例：

<el-dialog
  title="Dialog Title"
  :visible="dialogVisible"
  :width="500"
  :height="300"
>
  <!-- 对话框内容 -->
</el-dialog>

这样就可以在弹窗中显示指定大小的内容了。如果需要动态调整弹窗的大小，你可以在组件内部使用 this.$refs.dialogName.$el 获取到弹窗的 DOM 元素，并操作其 CSS 样式来动态调整大小。

 上面说到了$refs 和 $el ：

$refs 和 $el 是 Vue.js 中两个常用的属性

区别如下：

1. $refs：$refs 是 Vue 实例的一个属性，它是一个对象，包含了注册在 ref 属性上的子组件或元素。通过 $refs，我们可以直接访问这些子组件或元素的实例，从而可以在父组件中操作子组件。

2. $el：$el 是 Vue 实例的一个属性，它指向组件实例关联的根 DOM 元素。通过 $el，我们可以直接访问和操作组件关联的 DOM 元素，例如修改样式、添加事件监听器等。

举例说明：

假设有一个组件 MyComponent，在该组件中我们定义了一个 ref 属性和一个根元素的样式。代码如下：

<template>
  <div>
    <div ref="myRef">我的ref</div>
    <p>JUNY LONG</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.myRef); // 输出 ref 元素的实例
    console.log(this.$el); // 输出根元素，即外层的 div
  }
}
</script>

<style>
div {
  background-color: #f0f0f0;
  padding: 10px;
}
</style>

在上述例子中，myRef 是一个 ref 属性，用于标识 <div> 元素，并通过 $refs 可以访问到该元素的实例。而在 mounted 钩子函数中，我们使用 this.$refs.myRef 打印出该元素的实例。

关于ref：

　1、ref 加在普通的元素上，获取到的是dom元素

　2、ref 加在子组件上， 获取到的是组件实例，可以使用组件的所有方法

另外，$el 指向根元素 <div>，我们可以在样式中针对该元素进行样式设置，例如设置背景颜色、内间距等。

总结起来，$refs 主要用于访问组件实例，便于在父组件中操作子组件；而 $el 则用于访问组件关联的根 DOM 元素，便于直接操作 DOM 元素。