今天使用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. Springboot文件上传与下载

    一.创建简单的springboot-web项目 二.文件上传属性配置 #默认支持文件上传 spring.http.multipart.enabled =true spring.http.multipa ...

  2. react native 左边固定，右边横向滑动左右自适应高度

    要实现的效果 https://zuobaiquan.github.io/blogImg/201903/01.gif

  3. 20165223《网络对抗技术》Exp0 Kali的安装

    (1)安装步骤 Kali官网,下载Kali Linux 64 bit版本,按照网上安装教程进行即可 我是直接拷贝了Kali的.vmx文件(Linux 64bit),在上学期已经安装好的VMware中可 ...

  4. [CTSC2017]网络

    [CTSC2017]网络 连一条长度为len的边,使得基环树的直径最小 结论:一定连在某条直径两个点上(否则更靠近不劣) 然后二分答案判定. dp[i]:链上一个点往下延伸的最大深度 考虑对于任意两个 ...

  5. js-sha256源码

    /** * [js-sha256]{@link https://github.com/emn178/js-sha256} * * @version 0.9.0 * @author Chen, Yi-C ...

  6. Java集合的总结

    参考博客: http://www.jianshu.com/p/63e76826e852 http://www.cnblogs.com/LittleHann/p/3690187.html https:/ ...

  7. 【洛谷P2756】飞行员配对方案问题

    题目大意:二分图匹配裸题. 题解:用网络流进行处理. 找配对方案的时候,采用遍历二分图左边的每个节点,找到不与源点相连,且正向边权值为 0,反向边权值为 1 的边,输出即可. 代码如下 #includ ...

  8. keepalived 安装及配置

    简介 Keepalived是一个基于VRRP协议来实现的服务高可用方案,可以利用其来避免IP单点故障,类似的工具还有heartbeat.corosync.pacemaker. 但是它一般不会单独出现, ...

  9. Docker 基本核心原理

    Docker内核知识 namespace资源隔离 namespace的6项隔离 NameSpace 系统调用参数 隔离内容 UTS CLONE_NEWUTS 主机名与域名 IPC CLONE_NEWI ...

  10. python复习2

    在操作字符串时,我们经常遇到str和bytes的互相转换.为了避免乱码问题,应当始终坚持使用UTF-8编码对str和bytes进行转换.