打开控制台,发现如下警告:
解释:
在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 中两个常用的属性
区别如下:
$refs
:$refs
是 Vue 实例的一个属性,它是一个对象,包含了注册在ref
属性上的子组件或元素。通过$refs
,我们可以直接访问这些子组件或元素的实例,从而可以在父组件中操作子组件。
$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 元素。