今天使用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. Spring cloud zuul跨域（一）

    项目背景:我们有web和大屏,以及移动端,需要访问微服务接口. 然而大屏时自己打开的网页,在网页中通过js调用我的webapi.出现了跨域情况. 原因:出现这个问题,是由于跨域请求有2次请求. 第一次 ...

  2. Xshell连接ubuntu server端的vim(256色彩配置)

    VIM主题(Xshell端) [注]我的配置:Xshell连接VMware Workstation Pro下的Ubuntu 18 server版(要注意这里的server版,好似该版本没有下述的256 ...

  3. 「快速傅里叶变换(FFT)」学习笔记

    FFT即快速傅里叶变换,离散傅里叶变换及其逆变换的快速算法.在OI中用来优化多项式乘法. 本文主要目的是便于自己整理.复习 FFT的算法思路 已知两个多项式的系数表达式,要求其卷积的系数表达式. 先将 ...

  4. python学习日记（常用模块）

    模块概念 什么是模块 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编写的代 ...

  5. Phython中读写和存储.mat文件

    背景 在做deeplearning过程中,使用caffe的框架,一般使用matlab来处理图片(matlab处理图片相对简单,高效),用python来生成需要的lmdb文件以及做test产生结果.所以 ...

  6. babel7-按需加载polyfill

    babel7 babel7发布了. 在升级到 Babel 7 时需要注意几个重大变化: 移除对 Node.js 6 之前版本的支持: 使用带有作用域的 @babel 命名空间,以防止与官方 Babel ...

  7. 洛谷P3159 交换棋子 神奇的网络流

    神奇的建模...原题链接 如果你真的把交换看成交换,就\(GG\)了.首先我们要把交换看成是白棋的移动. 然后,很容易的就想到建模的大致思路:建立超级源点S和超级汇点T,从S向初始局面每个白棋所在的格 ...

  8. Django中related_name作用

    相当于我们使用related代替了在通过一个对象查询出多个对象集合时,使用表名_set来获取 我先定义两个模型,一个是作者,一个是作者出版的书籍,算是一对多的类型. class Person(mode ...

  9. Djagno从入门到放弃

    一.web应用.http协议.web框架 二.Django简介 三.路由控制 四.视图层 五.模版层 六.模型层:单表操作,多表操作,常用字段和参数,Django-model进阶 七.组件:Djang ...

  10. java-关于java_home配置，classpath配置和javac,java命令，javac编译器，和java虚拟机之间的关系

    在每个人学习java的第一步,都是安装jdk ,jre,配置java_home,classpath,path. 为什么要做这些?在阅读java-core的时候,看到了原理,p141. 一 关于类的共享 ...