vue调整el-dialog中body样式
时间: 2023-07-28 21:17:22 浏览: 104
可以通过在`<el-dialog>`标签上使用`custom-class`属性来自定义弹窗的样式,在这个自定义的样式中对`.el-dialog__body`进行样式调整即可。
例如,如果你想让弹窗的body部分背景色变成红色,可以这样写:
```html
<el-dialog title="提示" :visible.sync="dialogVisible" custom-class="my-dialog">
<span>这是一段内容</span>
</el-dialog>
```
```css
.my-dialog .el-dialog__body {
background-color: red;
}
```
这样就可以将弹窗的body部分背景色调整为红色了。
相关问题
vue3 el-dialog高度设置
在Vue3中,可以通过给el-dialog元素添加自定义的样式来设置其高度。可以在el-dialog外部套一层div,并给这个div添加一个自定义的类名,然后在样式中设置这个类名的高度即可。下面是一个示例代码:
<<引用:现在要实现一种窗口高度固定,内容滚动的方式,如下直接在内容上套一层div并加上自定义样式el-dialog-div <el-dialog :title="templateTitle" :visible.sync="openTemplateDialog" :width="templateDialogWidth" append-to-body :close-on-click-modal="false" > <div class="el-dialog-div"> // 窗口内容 </div> </el-dialog> <style lang="scss"> .el-dialog-div { height: 60vh; overflow-x: hidden; } </style> 。
el-dialog默认高度是自由拉伸的,当内容超过屏幕时会出现滚动条,按钮和标题都会随着滚动,用户体验不好。为了解决这个问题,你可以使用以下方法来设置el-dialog的高度:
1. 在el-dialog外部套一层div,并给这个div添加一个自定义的类名,比如"el-dialog-div"。
2. 在样式中设置这个类名的高度,比如设置为60vh,表示60%的视口高度。
3. 同时,设置这个div的overflow-x属性为hidden,以隐藏水平滚动条。
这样,el-dialog的高度就会被固定为60%的视口高度,并且出现内容超出时会出现垂直滚动条,而按钮和标题则保持固定不动,提升了用户体验。
vue为单独el-dialog__body设置高度
你可以通过设置 `max-height` 属性来为单独的 `el-dialog__body` 设置高度,如下所示:
```html
<el-dialog :visible.sync="dialogVisible">
<div slot="title">Dialog Title</div>
<div class="my-dialog-body" slot="body">
<div class="el-dialog__body-content">
<!-- Your content goes here -->
</div>
</div>
</el-dialog>
```
```css
.my-dialog-body {
max-height: 400px; /* 设置最大高度 */
overflow-y: auto; /* 滚动条 */
}
```
这里通过为 `el-dialog__body` 的父元素设置一个自定义的 class,然后在 CSS 中为该 class 设置 `max-height` 属性来设置高度。同时,为了让内容超出高度时出现滚动条,还需要为该 class 设置 `overflow-y: auto` 属性。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)