element-ui dialog 对话框高度修改

最新推荐文章于 2024-10-31 19:13:24 发布
最新推荐文章于 2024-10-31 19:13:24 发布
阅读量1.4w 收藏 6
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dongguabai/article/details/112776924
版权
本文介绍如何设置Element UI中el-dialog组件的高度为视口高度的一半，并实现内容滚动。注意class应置于<el-dialog>内部而非其上。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Vue3+elementPlus Modal弹窗高度私有修改不生效解决
朝花夕拾的博客
05-24 672
modal外层要添加一层div。
修改elementplus中dialog对话框的高度问题
tangyue99的博客
10-19 2586
修改elementplus中dialog对话框的高度问题。
element-plus 自定义dialog的高度
黄彪博客
07-18 2582
工作中使用 element-plus 的dialog弹窗，由于内容过多，出现了如下效果， 操作界面的按钮 需要滚动条滑动到底部，才能看到查看elment-plus 相关的API 文档，没有找到可以设置高度的
el-dialog__body设置高度
weixin_44134535的博客
11-23 5494
设置el-dialog__body的高度
el-dialog高度设置
Cabriella_的博客
03-14 4928
【代码】el-dialog高度设置。
【Element UI Dialog 对话框改成固定高度，超出部分滚动条滚动】
u012632105的博客
07-27 846
Element UI Dialog 对话框改成固定高度，超出部分滚动条滚动
修改element-ui Dialog对话框自适应高度 仅body内容部分滚动
qq_42730111的博客
02-14 5345
用element-ui Dialog 对话框时遇到这样一个问题（如下图），就是打开Dialog对话框后，它的高度不是自适应高度，从而导致浏览器产生滚动条，用户体验不是很好，经过一番修改，改成自己想要的自适应高度弹框。 定义样式如下： <style lang='scss'> /* 所属客户的input的按钮的颜色 */ .inputBox > .el-input-group__append { background-color: #5599ff; color: wh
element-ui的dialog对话框使用
weixin_67490903的博客
09-15 1845
element-ui的一些组件是有默认宽高，而且我们用常规方法style样式修改，是不能改变他的样式的。每天学一点，迟早成仙！
ElementUI中dialog弹出框高度处理
江湖行骗老中医
10-26 3247
需要在style标签中写上如下的样式，这里使用的less或者scss .abow_dialog { display: flex; justify-content: center; align-items: Center; overflow: hidden; .el-dialog { margin: 0 auto !important; height: 90%; overflow: hidden; .e
el-dialog固定高度
热门推荐
张媛的博客
11-15 1万+
现在要实现一种窗口高度固定，内容滚动的方式，如下直接在内容上套一层div并加上自定义样式el-dialog-div。默认高度是自由拉伸的，当内容超过屏幕时会出现滚动条，按钮和标题都会随着滚动，用户体验不好。
ElementPlus中el-dialog高度设置问题
最新发布
元宝的博客
10-31 1593
【代码】ElementPlus。el-dialog高度设置问题
el-dialog设置固定高度
Tttrycatch的博客
03-20 7916
【代码】el-dialog设置固定高度。
element el-dialog 高度问题
WenyueQ@
04-16 1万+
通过custom-class 样式解决，根据每个不同的dialog 自定义custom-class <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" custom-class="menu-dialog-height > <div style="height:540px;"> <span>这是一段信息</span> </div> ...
element-plus：el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
每天都想吃好吃的
12-14 879
【代码】element-plus：el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动。
vue el-dialog通用弹窗 高度设置好的弹窗
weixin_44040867的博客
05-11 2464
::v-deep .el-dialog { position: relative; margin: 0 auto 0px; background: #ffffff; border-radius: 2px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); -webkit-box-sizing: border-box; box-sizing: .
vue2中设置el-dialog对话框组件内容区高度
wch19960518的博客
07-31 794
【代码】vue2中设置el-dialog对话框组件内容区高度。
element单页面多个dialog情况下修改dialog高度
_____青絲
08-01 3579
之前写了个如何修改表单样式，今天用到了dialog，一个页面有5个的dialog，高度不一样，怎么修改？ 简单，给dialog加个id 修改时候你懂得： <el-dialog title="合同完成" id="achieve_dialog" center :visible.sync="achieve_dialog" width="600px"></el-dialog> ...
el-dialog中设置默认高度，超出默认高度则自适应高度
cui01016的博客
04-16 3317
【代码】el-dialog中设置默认高度，超出默认高度则自适应高度。
Vue中使用element-ui的el-dialog对话框
05-30
要在Vue中使用element-ui的el-dialog对话框，你需要先安装element-ui，可以使用npm或者yarn进行安装。 1. 通过npm安装 ``` npm install element-ui --save ``` 2. 通过yarn安装 ``` yarn add element-ui ``` 安装完成后，在Vue项目中引入element-ui，并注册el-dialog组件。 ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 现在你可以在Vue组件中使用el-dialog组件了。下面是一个简单的示例： ```html <template> <div> <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button> <el-dialog title="提示" :visible.sync="dialogVisible"> <span>这是一个对话框</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="dialogVisible = false">确定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false } } } </script> ``` 在这个示例中，我们使用了el-button组件来触发打开对话框的事件，然后在el-dialog组件中定义了对话框的标题和内容，并使用visible.sync来控制对话框的显示和隐藏。在底部我们使用了el-button组件来定义对话框的按钮区域。 这是一个简单的例子，你可以根据自己的需求来定制对话框的样式和交互。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值