el-dialog里的组件通过$el.style.display来显示
时间: 2024-05-17 13:12:48 浏览: 13
是的,el-dialog组件通过$el.style.display来控制显示和隐藏。当el-dialog组件显示时,$el.style.display被设置为"block",隐藏时则被设置为"none"。这是通过el-dialog组件的visible属性来控制的。当visible为true时,$el.style.display被设置为"block",为false时则被设置为"none"。
相关问题
el-dialog 内的组件高度随着el-dialog高度
可以通过设置el-dialog的高度为100%以及给el-dialog-body设置flex: 1来实现el-dialog内的组件高度随着el-dialog高度的变化而变化。
代码示例:
```
<template>
<el-dialog :visible.sync="dialogVisible" :style="{height: '100%'}">
<el-dialog-body style="display: flex; flex-direction: column; justify-content: space-between; flex: 1;">
<div>这是一个组件</div>
<div>这是另一个组件</div>
</el-dialog-body>
</el-dialog>
</template>
```
el-dialog display
el-dialog的display属性可以通过CSS样式来控制。根据提供的引用内容,有两种方法可以实现el-dialog的垂直居中显示。第一种方法是使用element-ui的属性和CSS样式,如引用所示。你可以将以下代码复制到你的项目中,以实现el-dialog的垂直居中显示:
```css
::v-deep .el-dialog {
display: flex;
flex-direction: column;
margin: 0 !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: calc(100% - 30px);
max-width: calc(100% - 30px);
}
::v-deep .el-dialog .el-dialog__body {
flex: 1;
overflow: auto;
}
```
另外一种方法是使用CSS样式,如引用所示。你可以将以下代码应用于你的项目中的el-dialog元素,以实现垂直居中显示:
```css
.g-dialog-wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
width: 405px;
background-color: #ffffff;
height: 226px;
...
}
```