el-dialog右侧居中
时间: 2023-08-27 21:12:37 浏览: 175
element ui 对话框el-dialog关闭事件详解
根据提供的引用内容,el-dialog右侧居中的问题可以通过修改el-dialog的样式来解决。具体的解决方法如下:
在app.vue的style部分中添加以下内容:
```css
.el-dialog {
display: flex !important;
flex-direction: column !important;
margin: 0 !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
overflow-y: scroll !important;
max-height: 100vh !important;
}
```
这样设置后,el-dialog会在视口的中央上下左右居中显示,并且如果内容超过了视口的高度,会出现滚动条。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* *2* [elementui中el-dialog模态与非模态的研究](https://blog.csdn.net/qq_39163732/article/details/112529653)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item]
- *3* [element-plus:el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动](https://blog.csdn.net/m0_58050016/article/details/128114632)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item]
[ .reference_list ]
阅读全文