解决vue elementUI 弹框Dialog 打开后滚条回到顶部

最新推荐文章于 2024-05-30 17:13:06 发布
最新推荐文章于 2024-05-30 17:13:06 发布
阅读量3.5k 收藏 2
点赞数 3
分类专栏： element UI vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44146522/article/details/124039686
版权

<el-dialog

:lock-scroll="false"

:append-to-body="true" >

</el-dialog >

append-to-bodyDialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 trueboolean—false
lock-scroll是否在 Dialog 出现时将 body 滚动锁定boolean—true
我家媳妇儿萌哒哒
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
scroll-lock:锁定页面的滚动位置
05-18
滚动锁定 用于锁定页面滚动位置的AMD模块。 强调了跨浏览器的支持。 浏览器支持 IE8 + Chrome合金 火狐浏览器 苹果浏览器 Android 4+ iOS 7以上 安装 要通过Bower安装软件包： bower install scroll-lock 方法 ScrollLock.lock() 锁定当前窗口位置并禁用在任一方向上的滚动。 ScrollLock.unlock() 解锁窗口位置并允许再次滚动。
vue中简单弹框dialog的实现方法
08-27
2. `.dialog-cover`：黑色半透明遮罩层，用于点击后关闭弹框，设置`v-if="isShow"`，确保只有在弹框开启时才显示。 3. `transition`组件：用于添加动画效果，这里命名为`drop`，包含了进入和离开的过渡效果。 4. `....
element中dialog出现滚动条记录位置问题
qq2276031的博客
05-12 3136
element中dialog出现滚动条记录位置问题 //弹窗出现滚动条的时候滚动到最底下，下次在点开的时候还在最底下，可以通过以下方式解决 <el-dialog :title="formTitle" :visible.sync="dialogFormVisible" :lock-scroll="false" //主要是这个属性 :append-to-body="true" //跟这个属性 :close-on-click-modal="false"
解决使用el-dialog,切换tab页标签时滚动条还原到了最顶端
最新发布
Lella的博客
05-30 217
el-dialog里面内容比较多，每次用户滚动中间查看某个数据，切了其他tab页再回来的时候滚动条又回到了最顶端，给操作带来不便，故对代码进行了更改每次切完tab标签，el-dialog滚动条位置保持不变，因为项目中使用比较多，故写了公共方法。
vue el-dialog 点击之后滚动条回到顶部
xuxingyuan_的博客
12-19 4913
vue el-dialog 点击之后滚动条回到顶部 记录你当前滚动条的位置 <el-dialog :title="baseTitle" :visible.sync="visible" :before-close="cancelHandle" :close-on-click-modal="false" width="760px" :lock-scroll="false" :append-to-...
vue elementUI 对话框Dialog 打开后滚条回到顶部
progrmmmm的博客
11-29 2969
正常情况下网页虽然不会显示滚动条了,但是不会回到顶部. 1.点击弹出对话框的标签是a标签,而且加了href,去掉href就可以了.
Element-ui el-scrollbar 源码解析
weixin_33862188的博客
05-01 2130
前几天美化博客时发现滚动条在window下实在太难看，所以在基于vue的技术上寻找美化滚动条的方法。记得Element-ui源码中有名为 el-scrollbar 的滚动组件，虽然文档上没有提到，但使用的人还是不少。今天记录下源码的阅读心得。 在这之前 在看苦涩的代码前，先大概描述一下滚动条组件的用处和行为，方便理解代码逻辑。 因为操作系统和浏览器的不同，滚动条外观是不一样的。需要做风格统一时，...
解决elementui的dialog对话框过高会被拖动的bug
没有酒也没有故事。
12-28 2120
在使用elementUI过程中，当dialog对话元素过多长处浏览器高度是，点击标题就会跳成如下图这样，上方会被遮挡且无法拖动上去： 解决方法是通过设置css固定top及left禁止拖动，核心css代码： /deep/.el-dialog { top: 15% !important; left: 0 !important; } ...
Element Dialog弹框回到顶部
weixin_57570884的博客
03-03 1236
Element Dialog弹框回到顶部
element ui使用滚动条组件el-scrollbar(官方没有)解决对话框el-dialog的滚动条问题
濮家大少
03-12 9095
今天写vue+element ui写项目时有个需求是要在对话框中进行操作，但是当对话框内容过多时却不会出现滚动条，通过修改样式后虽然出现滚动条，但是滚动条的样式不是很理想，通过查找发现了element ui官方没有的隐藏组件el-scrollbar(滚动条组件) <el-scrollbar style="height:300px;">//我在这里设置高度未300px ...... &...
Ant Design ModalForm 打开二级弹框引起的页面滚动条失效解决方法
清风明月的博客
04-29 3511
Ant Design React 遇到打开二级弹框引起的页面滚动条失效，使用的是ModalForm。 原因：在打开弹框的时候会给body标签上加style=“width: calc(100% - 15px); overflow: hidden;”，隐藏标签的滚动条，关闭弹框会清除这个style，在弹框里面再打开二级弹框就会出现body标签上style没清理的问题导致滚动条消失。 解决方法如下： 在一级弹框ModalForm关闭后清理给body加的style，具体代码如下： <ModalForm
vue elementUI table表格数据 滚动懒加载的实现方法
10-17
Vue.js 是一款流行的前端框架，ElementUI 是基于 Vue 的一套组件库，提供了丰富的 UI 组件。在处理大量数据展示时，为了避免一次性加载过多数据导致页面响应慢或用户体验不佳，我们可以采用滚动懒加载（Scroll Lazy ...
vue 弹框产生的滚动穿透问题的解决
01-21
最近开发过程中遇到一些小问题(似乎问题总是那么多)，但一直没什么时间去优化与解决。程序员不能被业务绑架，有时间还是花点在代码，开始这次的vue尝试吧。 首先定义一个全局样式： .noscroll{ position: fixed; ...
基于 vue 的elementui的无限滚动组件111.txt
04-20
基于 vue 的elementui的无限滚动组件，全局引入elementui，代码简单易懂，参数少适合理解
element弹框组件——滚动条“回家”指南
Shids_的博客
04-29 2406
element弹框组件——滚动条“回家”指南
VUE+ElementUI dialog打开时禁止iOS端的body滚动
Akikang的博客
12-26 2028
现象： 在原生app中嵌套web页面时，时常会遇到由于系统不同带来的差异。 此次引入ElementUI，使用其中的dialog组件时，明明默认dialog显示时，body不能滚动： 安卓和pc下没毛病，但在iOS下lock-scroll无效，dialog背后的body依然可以滚动。 解决方法： 思路： 主要是在打开dialog时设置html的 ...
elementUI踩坑之关于dialog弹框
Livvvvv_的博客
08-10 2782
** dialog组件的属性–lock-scroll ** elementUI官方解释 先描述下页面：pc端 一个很长的关于作品评选投票的页面，根据页面滚动距离进行分页按需加载，列表中的对象支持投票或取消投票。 描述功能：1.若当前作品支持投票，可点击投票按钮，点击后会出现一个弹框，内容显示可投票数，点击确定后掉投票接口，进行投票，成功后弹框关闭；需要刷新列表并且页面仍需显示至投票前的位置。 2.当前作品若已被投票，按钮则为取消投票按钮，点击按钮后直接发送请求，成功后直接刷新页面，也需要显示投票前的位置。
elementui弹框按钮
09-04
elementui弹框按钮是通过在CSS样式中添加相应的代码来实现的。在给定样式中，可以看到一个名为`el-popconfirm__action`的类，其中包含了确定和取消按钮的样式。确定按钮使用`.el-button:nth-child(1)`选择器来设置样式，包括右浮动、右边距、背景颜色、边框圆角等属性。取消按钮使用`.el-button:nth-child(2)`选择器来设置样式，包括左浮动、左边距、背景颜色、边框等属性。这些样式可以根据需要进行修改以满足具体的设计需求。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [elementUI中的Popconfirm弹出框自定义调整（按钮位置，颜色调整）](https://blog.csdn.net/m0_54853420/article/details/123252356)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue+elementui实现点击table中的单元格触发事件--弹框](https://download.csdn.net/download/weixin_38624183/12925033)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值