今天使用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. python调用openstack的api，create_instance的程序解析

    python调用openstack的api,create_instance的程序解析 2017年10月17日 15:27:24 CloudXli 阅读数:848   版权声明:本文为博主原创文章,未经 ...

  2. 基于Python清除破损图片需求实现

    处理同事爬取的图片时,其因爬取过程中因图片类型/网络等问题,获取到较大批次破损图片,现需清除破损文件,并做简要记录. 要点: 在python中,可以使⽤imghdr模块中的what()⽅法判断图⽚⽂件 ...

  3. wx.request 使用数据

    小程序中,怎么使用wx.request返回的数据??? 在你的js页面中 主要是这句话 var that=this; 为什么呢?因为使用过jquery的ajax的朋友都知道.在ajax函数中的this ...

  4. Nginx从入门到实践(四)

    Nginx常见问题和排错经验,实践应用场景中的方法处理Nginx安全,常见的应用层安全隐患,复杂访问控制,Nignx的sql防注入安全策略,Nginx的整体配置,搭建合理Nginx中间件架构配置步骤. ...

  5. 上板子在线抓波发现app_rdy一直为低

    现象 使用Xilinx的MIG IP测试外挂DDR3的读写发现一段很短的时间后app_rdy恒为低,并且最后一个读出的数据全是F. (1)不读写数据,app_rdy正常为高,MIG IP初始化信号为高 ...

  6. Codeforces Round #543

    (比赛链接)[http://codeforces.com/contest/1120] A 给出一个长度为m的序列a 可以删除一些数 使得最后从没删的第一个数开始 每k个一截 截出的n个多重集合中 至少 ...

  7. Apache POI 示例

    Apache POI 3.17 Javadocs 用Java编写的免费开源的跨平台的 Java API,Apache POI提供API给Java程式对Microsoft Office(Excel.WO ...

  8. [APIO2017]商旅（floyd+分数规划+SPFA）

    题解:首先肯定要跑最短路,而n<=100,所以可以用floyd,然后根据比值,很容易想到二分答案,然后再SPFA跑一遍负环,就能求出解了. #include<bits/stdc++.h&g ...

  9. 详解最大似然估计（MLE）、最大后验概率估计（MAP），以及贝叶斯公式的理解

    转载声明:本文为转载文章,发表于nebulaf91的csdn博客.欢迎转载,但请务必保留本信息,注明文章出处. 原文作者: nebulaf91 原文原始地址:http://blog.csdn.net/ ...

  10. 数据结构与算法之美学习笔记：B+树（第48讲）

    一.解决问题的前提是定义清楚问题 通过对一些模糊需求进行假设,来限定要解决问题的范围 根据某个值查找数据,比如 select * from use where id=1234: 根据区间值来查询某些数 ...