element的dialog框过高展示问题

最新推荐文章于 2024-04-16 11:42:50 发布
最新推荐文章于 2024-04-16 11:42:50 发布
阅读量4.5k 收藏 1
点赞数
分类专栏： 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
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义dialog位置
12-10
在Android开发中，自定义...通过灵活调整`gravity`、`x`和`y`属性，可以实现Dialog在屏幕上的任意位置展示，模拟PopupWindow的效果。在实际开发中，结合业务需求，还可以扩展更多功能，如动画效果、点击事件处理等。
dialog-element:对话框元素示例
06-13
在网页设计和开发中，对话框元素扮演...而"dialog-element:对话框元素示例"这个主题很可能是对如何使用`<dialog>`元素的一个实例演示，通过查看`dialog-element-gh-pages`中的源码，我们可以更深入地学习和理解其用法。
el-dialog嵌套组件使用，组件内容超出高度
青春不打烊的博客
06-11 4289
第一种解决方式： 定义样式 .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 {
Element UI中el-dialog中内容超出自定义滚动条
卷发头的鲁智深的博客
03-13 1万+
dialog内容超出显示滚动条
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"
el-dialog有滚动条，第一次打开滚动到底部，关闭，再次打开还在底部
qq_45894929的博客
12-10 2942
问题： el-dialog有滚动条，第一次打开滚动到底部，关闭，再次打开还在底部 解决： 使用append-to-body=“true” Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true 问题： 使用append-to-body="true之后，dialog中自己加类名写的样式不生效 解决： 将样式改为全局样式 ...
elementPlus dialog组件设置可拖动，当内容高度大于视口高度拖动显示异常的解决办法
元仙僧的博客
07-27 1078
elementPlus UI的dialog弹框组件在设置了draggable属性后就可拖动弹框，但是当弹框的内容高度大于视口高度时去拖动弹框就会出现显示问题。
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
Dialog组件通常用于显示临时的信息或者进行一些交互操作，而Drawer则常用于侧滑展示额外的内容，两者都是Web应用中常见的交互元素。在Element UI中，Dialog和Drawer已经具备了基础的使用方式，但为了满足特定需求，...
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）：实现页面内容的切换，...
jqueryeasyUI dialog 弹出窗口超出浏览器，导致不能关闭的bug解决方案
weixin_30885111的博客
05-22 158
jqueryeasyUI dialog 弹出窗口超出浏览器，导致不能关闭的bug解决方案 2014年8月30日3233次浏览 相信很多前端朋友都用过jqueryeasyUI,jqueryeasyUI功能很强大，可以实现我们前端很多想要的效果，例如，下拉树也就是select tree等。但是jqueryeasyUI底层构建不是很好，简单的应用还可以，深入开发的话，还是推荐用extjs相对好...
el-dialog中设置默认高度，超出默认高度则自适应高度
最新发布
cui01016的博客
04-16 940
【代码】el-dialog中设置默认高度，超出默认高度则自适应高度。
Elementui级联选择器的选择框的高度溢出，同浏览器高度一样解决方案
weixin_45392774的博客
09-23 547
在做项目过程中，发现Cascader 级联选择器的选择框的高度溢出和浏览器等高，和预期效果不一样 解决方案：在全局样式中给级联选择器的菜单指定一个高度值： 注意：刚开始用.el-cascader{ height: 300px; }测试不成功，改成.el-cascader-menu/panel{ height: 300px; }就可以了 .el-cascader-menu { height: 300px; } ...
element-ui对话框组件自定义内容超出显示滚动条
agua001的博客
10-19 5778
需求是内容高度固定了，文字过多的话自动显示滚动条 html: <el-dialog title="<<某某用户协议>>" :visible.sync="userDig" width="800px" custom-class="userDig" center> <div class="userAgree"> <span class="userAgree_txt"&gt.
element-ui dialog对话框底部按钮超出对话框bug
qq_61267719的博客
06-17 482
今天突然发现element-ui的对话框底部按钮超出了对话框，属性可以解决，具体原因暂时不清楚，不知道怎么父元素高度减半了。检查后发现是子元素超出了父元素。经过尝试后发现给父元素加上。
如何通过反射来解决AlertDialog标题由于字数过多显示不全的问题
SAHADEV的专栏
06-10 5152
转载前请标明出处:http://blog.csdn.net/sahadev_
解决elementui的dialog对话框过高会被拖动的bug
没有酒也没有故事。
12-28 2118
在使用elementUI过程中，当dialog对话元素过多长处浏览器高度是，点击标题就会跳成如下图这样，上方会被遮挡且无法拖动上去： 解决方法是通过设置css固定top及left禁止拖动，核心css代码： /deep/.el-dialog { top: 15% !important; left: 0 !important; } ...
element Dialog 的用法
04-05
Element Dialog 是一个弹出框组件，用于在页面中展示一个模态窗口，通常用于提示用户或者展示详细信息。 使用 Element Dialog 的步骤如下： 1. 在 HTML 文件中引入 Element UI 的样式文件和 JavaScript 文件。 2. 在需要使用 Dialog 的组件中，引入 Dialog 组件并注册。 ```javascript import { Dialog } from 'element-ui'; export default { components: { Dialog }, ... } ``` 3. 在组件中使用 Dialog 组件，可以通过 v-model 控制 Dialog 的显示和隐藏。 ```html <template> <div> <el-button type="primary" @click="dialogVisible = true">打开 Dialog</el-button> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" > <p>这是一个 Dialog 弹出框。</p> <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 } }, methods: { handleClose(done) { this.$confirm('确定关闭？') .then(_ => { done(); }) .catch(_ => {}); } } } </script> ``` 4. 在 Dialog 组件中可以添加各种组件和数据，比如标题、内容、底部按钮等，可以通过 slot 来实现。 ```html <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" > <p>这是一个 Dialog 弹出框。</p> <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> ``` 以上就是 Element Dialog 的用法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值