element的dialog框过高展示问题

最新推荐文章于 2024-06-04 09:39:48 发布
最新推荐文章于 2024-06-04 09:39:48 发布
阅读量4.5k 收藏
点赞数
分类专栏： vue小问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_36729274/article/details/103179860
版权

<el-dialog

ref="editDialog"

title="社区矛盾调解处理"

width="950px"

:top='top'

class="selfdialog"

:close-on-click-modal="false"

:visible.sync="visible"

v-if="visible"

/>

dialog的内容太高且超出屏幕高度，解决问题第一次滚动到底部，第二次打开仍然在底部；使用v-if="visible"每次关闭直接销毁dialog

 

薛中然
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
Dialog组件通常用于显示临时的信息或者进行一些交互操作，而Drawer则常用于侧滑展示额外的内容，两者都是Web应用中常见的交互元素。在Element UI中，Dialog和Drawer已经具备了基础的使用方式，但为了满足特定需求，...
Vue+Element-UI el-dialog
ifmushroom的博客
10-07 1003
我们公司的前端项目都用vue+element-ui，然后像新增、编辑页面都用el-dialog弹框。我也不知道为啥都要用这个，上班快三个月了，至今我做的项目都还没涉及父子组件。emmm，咱也不敢说，咱也不敢问。问就是按照公司已有的框架走速度更快。 然后呢，我就发现一个问题，如果el-dialog弹框内容过多，页面就会很长，当你第一次拉到下面，没拉回去，点击了关闭，下一次你再点击进来会发现它依旧在下面。。毫无疑问这样的用户体验贼差。 其实在标签中加上属性： losk-scroll=‘false’ 和 a
Element UI Dialog 对话框改成固定高度，超出部分滚动条滚动
weixin_44702139的博客
05-19 1万+
问题描述 elememt ui 中的el-dialog对话框如果内容过多高度会被无限拉长。要将其设置成固定高度，此处我设置的是页面总高度的80%，内容过多时在对话框内出现滚动条，具体代码如下： 但是这样设置会造成高度不能根据内容自适应，始终是80% // 内容 <template> <el-dialog :title="title" :visible.sync="dialogVisible" class="showAll_dialog"
Element UI中el-dialog中内容超出自定义滚动条
最新发布
qq_40603125的博客
06-04 663
【代码】Element UI中el-dialog中内容超出自定义滚动条。
el-dialog嵌套组件使用，组件内容超出高度
青春不打烊的博客
06-11 4294
第一种解决方式： 定义样式 .abow_dialog { display: flex; justify-content: center; align-items: Center; overflow: hidden; .el-dialog { margin: 0 auto !important; height: 90%; overflow: hidden; .el-dialog__body {
Vue3对话框（Dialog）
Mr Dear的博客
04-04 5911
常用的弹窗组件，可用于弹窗展示内容，或者提交内容，同时包含全屏按钮功能。
自定义dialog位置
12-10
在Android开发中，自定义...通过灵活调整`gravity`、`x`和`y`属性，可以实现Dialog在屏幕上的任意位置展示，模拟PopupWindow的效果。在实际开发中，结合业务需求，还可以扩展更多功能，如动画效果、点击事件处理等。
dialog-element:对话框元素示例
06-13
在网页设计和开发中，对话框元素扮演...而"dialog-element:对话框元素示例"这个主题很可能是对如何使用`<dialog>`元素的一个实例演示，通过查看`dialog-element-gh-pages`中的源码，我们可以更深入地学习和理解其用法。
vue中使用element ui的弹窗与echarts之间的问题详解
10-16
在Vue.js应用中，结合Element UI和ECharts进行开发时，可能会遇到一些特定的问题，尤其是在使用Element UI的弹窗组件（如`el-drawer`）内嵌ECharts图表时。本文将深入探讨这个问题，并提供解决方案。 首先，问题的...
vue+element 后台管理通用框架2
01-09
5. 弹出框（Dialog）：用于显示临时内容的对话框，支持关闭、拖动、全屏等操作。 6. 导航菜单（NavMenu）：用于页面导航的菜单栏，支持水平和垂直布局，可配置多级菜单。 7. 标签页（Tab）：实现页面内容的切换，...
vue 固定 Dialog 对话框的高度
热门推荐
且听风吟的博客
08-20 2万+
Element UI组件提高了不少开发效率，使用 Dialog 对话框的时候发现，组件说明文档提供了 width 来设置 Dialog 的宽度，并没有给出如何固定高度。
vue-elementui开发采坑-dialog弹框不在顶部
qq_35221272的博客
08-12 1850
解决Dialog弹窗中滚动条不在顶部问题解决Dialog弹窗中滚动条不在顶部问题 问题：打开弹窗后滚动条置于底部 解决：添加append-to-body属性即可解决 append-to-body Dialog自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true <el-dialog title="新增" :visible="visible" append-to-body> </el-dialog> ...
Vue3+elementPlus Modal弹窗高度私有修改不生效解决
朝花夕拾的博客
05-24 523
modal外层要添加一层div。
element-ui dialog对话框底部按钮超出对话框bug
qq_61267719的博客
06-17 486
今天突然发现element-ui的对话框底部按钮超出了对话框，属性可以解决，具体原因暂时不清楚，不知道怎么父元素高度减半了。检查后发现是子元素超出了父元素。经过尝试后发现给父元素加上。
el-dialog高度设置
Cabriella_的博客
03-14 2487
【代码】el-dialog高度设置。
解决elementui的dialog对话框过高会被拖动的bug
没有酒也没有故事。
12-28 2120
在使用elementUI过程中，当dialog对话元素过多长处浏览器高度是，点击标题就会跳成如下图这样，上方会被遮挡且无法拖动上去： 解决方法是通过设置css固定top及left禁止拖动，核心css代码： /deep/.el-dialog { top: 15% !important; left: 0 !important; } ...
解决element UI中 select下拉框 el-select-dropdown el-popper超出el-dialog弹框的问题
shadow__jing的博客
07-26 3479
【问题】： 在elementUI 中，el-dialog的内容比较多，出现滚动条，且内容包含input输入框、select下拉框、时间选择器、cascader级联选择器等，在点开select下拉选择框后并向下滚动鼠标，会出现下拉框跑出el-dialog的区域的情况（有可能离el-dialog的区域很远），造成页面的展示效果混乱。【解决方案】：我们可以在鼠标滚动的时候，让select弹框隐藏，这样就可以解决select 下拉框在el-dialog外面的问题了。在自己封装的el-dialog的组件里。
element Dialog 的用法
04-05
Element Dialog 是一个弹出框组件，用于在页面中展示一个模态窗口，通常用于提示用户或者展示详细信息。 使用 Element Dialog 的步骤如下： 1. 在 HTML 文件中引入 Element UI 的样式文件和 JavaScript 文件。 2....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值