今天使用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. BZOJ3033太鼓达人——哈密顿回路/欧拉回路

    题目描述 七夕祭上,Vani牵着cl的手,在明亮的灯光和欢乐的气氛中愉快地穿行.这时,在前面忽然出现了一台太鼓达人机台,而在机台前坐着的是刚刚被精英队伍成员XLk.Poet_shy和lydrainbo ...

  2. mysql left join 优化

      参考 https://www.cnblogs.com/zedosu/p/6555981.html

  3. 洛谷 P2325 [SCOI2005]王室联邦

    简化版题意: 一个国家由\(n\)个城市组成一颗树,要将其划分为\(n\)个省 每个城市大小为\([B,3B]\),每个省有一个省会(不一定要在省内),使得每个省的所有城市到省会的路径上不能经过其他省 ...

  4. centos7升级内核至最新

    应用背景: 最近在接触docker,其对内核版本要求较高,就连目前使用的centos7.x默认内核版本为3.10.0-xxx,也是刚好满足其最低要求,故借此机会记录一下升级内核的操作步骤. 测试环境: ...

  5. feed.snapdo.com 病毒

    过程:安装破解office2013 使用破解工具 Microsoft toolkit 2.7 beta  1 关闭防火墙 浏览器被木马篡改:搜索引擎被篡改: 相关进程 bittorrent.exe 无 ...

  6. 在centos 7 下安装 nginx

    在Linux下安装 nginx 1下载对应当前系统版本的nginx包(package) wget  http://nginx.org/packages/centos/7/noarch/RPMS/ngi ...

  7. mysql You can't specify target table 'xxx' for update in FROM clause的解决

    DELETE from sp_goodscontent where goodsId in (SELECT t.goodsId from ( SELECT goodsId FROM sp_goodsco ...

  8. ref、out参数

    ref和out都是表示按引用传递.与指针类似,直接指向同一内存. 按值传递参数的方法永远不可能改变方法外的变量,需要改变方法外的变量就必须按引用传递参数. 传递参数的方法,在C语言里,用指针.在C#里 ...

  9. 《Linux下cp XXX1 XXX2的功能》的实现

    <Linux下cp XXX1 XXX2的功能>的实现 一.题目要求 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP支持两个参数: java MyC ...

  10. 【Mac上的PotPlayer视频播放器】Movist Pro for Mac 2.1.2

    [简介] Movist 是Mac上最好用的视频播放器之一,功能齐全,类似Windows上的PotPlayer,今天和大家分享最新的 2.1.2 中文版本,Movist 支持几乎所有常见的视频格式,包括 ...