今天使用element中的Dialog组件时发现一个问题：当Dialog内容过多时会出现滚动条，而当你滚动到一定位置后关闭Dialog，然后再次打开时滚动条仍然保持在上一次关闭前的位置而没有回到顶部。

　　通常遇到这样的问题解决方法就是在某个钩子事件中将组件的scrollTop值重新设为0，在element2.4.8的文档中，Dialog组件提供的事件一共有四个：open、opened、close、closed，我的想法是在opened事件中等到组件渲染完后将组件的scrollTop值设为0，当时调试发现opened事件怎么也没触发到，后来发现自己用的element版本是2.4.7，更新版本后问题解决，下面是关键代码：

　　

　　

　　不过这种方法也有个体验不好的地方，就是打开对话框后明显有个滚动条回退到顶部的效果，感觉页面会抖一下，在对话框方面element没有bootstrap做的好，各位如果有更好的解决方法欢迎在评论区分享一下

element-ui对话框组件Dialog在回调事件opened获取组件滚动条scrollTop的问题的更多相关文章

  1. jQuery UI 对话框（Dialog） - 模态表单

    <!doctype html><html lang="en"><head> <meta charset="utf-8" ...

  2. vue+element UI + axios封装文件上传及进度条组件

    1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...

  3. element ui的 el-dropdown-item标签点击事件

    在vue项目中使用element的el-dropdown-item标签时 给标签添加click事件 初始时按照正常写法 <el-dropdown-item @click="click( ...

  4. vue+element ui项目总结点（五）Carousel 走马灯组件、Collapse 折叠面板、Tree 树形控件

    <template> <div class="ele_test_box"> <!-- 常用效果 Popover 弹出框组件 具体属性查看官方文档--& ...

  5. vue+element UI 使用select元素动态的从后台获取到

    VUE select元素动态的从后台获取到 <el-form-item label="选择店铺"> <el-select v-model="value& ...

  6. 在被vue组件引用的 js 文件里获取组件实例this

    思路: 通过调用函数 把 组件实例this  传递 到 被应用的 js文件里 实例: 文件结构 在SendThis.vue 文件中引用 了modalConfig.js import modalConf ...

  7. jQuery UI 实例 - 对话框（Dialog）(zhuan)

    http://www.runoob.com/jqueryui/example-dialog.html ************************************************* ...

  8. 关于Element对话框组件Dialog在使用时的一些问题及解决办法

    Element对话框组件Dialog在我们的实际项目开发中可以说是一个使用频率较高的组件,它能为我们展示提示的功能,如:业务模块提交前展示我们曾经输入或选择过的业务信息,或者展示列表信息中某项业务的具 ...

  9. vue问题三：element ui的upload组件上传图片成功和移除事件

    element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...

随机推荐

  1. 洛谷P3719 REXP 题解

    题目 一道考验递归的题目,在面对这种字符串处理的题时,还是应该用递归这种比较好看懂而且比较简单写的算法. \(code\) ```c++ // luogu-judger-enable-o2 inclu ...

  2. SpringMvc如何获取请求头请求体的消息

    对接第三方服务,说传递的POST请求中,Request Header中有需要的参数,Request Body为XML格式,包括创建消息正文和属性. 刚开始我以为可以通过 HttpServletRequ ...

  3. 「译」图解 ArrayBuffers 和 SharedArrayBuffers

    作者:Lin Clark 译者:Cody Chan 原帖链接:A cartoon intro to ArrayBuffers and SharedArrayBuffers 这是图解 SharedArr ...

  4. foreach 中获取索引index的方法

    一样,很少用到,记下来先 主要代码: foreach (var item in arr) { int index = arr.indexOf(item); //index 为索引值 }

  5. VBScript 学习笔记

    创建一个变量 VBScript 变量名称的规则: 必须以字母开头 不能包含点号(.) 不能超过 255 个字符 在 VBScript 的缩写中,所有的变量都与类型 variant 相关,可存储不同类型 ...

  6. 牛客小白月赛13-J小A的数学题 （莫比乌斯反演）

    链接:https://ac.nowcoder.com/acm/contest/549/J来源:牛客网 题目描述 小A最近开始研究数论题了,这一次他随手写出来一个式子,∑ni=1∑mj=1gcd(i,j ...

  7. net core swagger接口

    net swagger接口 引用NuGet包 Install-Package Swashbuckle.AspNetCore //控制台 Microsoft.Extensions.PlatformAbs ...

  8. Sql知识点总结

    一.数据库对象:表(table) 视图(view) 序列(sequence) 索引(index) 同义词(synonym) 视图(view) : 存储起来的 select 语句 create view ...

  9. CF集萃2

    CF1155D - Beautiful Array 题意:给你一个序列和x,你可以选择任意一个子串(可以为空)乘上x,使得得到的序列最大子串和最大.求这个最大值.30w,2s. 解:设fi,0/1/2 ...

  10. elasticsearch中head插件中的定制增加用户名密码范例

    在head插件目录下一般 在 elasticsearch目录下的 plugins\head目录 下 在 或 plugins\head\site目录下 有 一个index.html文件.把这个文件用下面 ...