今天使用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. jsp使用

    session.setAttribute("sessionName",Object); 用来设置session值的,sessionName是名称,object是你要保存的对象. s ...

  2. 【BZOJ4029】[HEOI2015]定价（贪心）

    [BZOJ4029][HEOI2015]定价(贪心) 题面 BZOJ 洛谷 题解 每次加上十进制下的\(lowbit\)就行了??? #include<iostream> #include ...

  3. HDU - 3247 Resource Archiver (AC自动机，状压dp)

    \(\quad\)Great! Your new software is almost finished! The only thing left to do is archiving all you ...

  4. NOIP 2019游记

    Update on 2019.4.20 禁赛预定

  5. 一加3T 误清除data 恢复数据

    数据丢失经过:日常用机无备份直接操作:装google框架后,rootexplorer文件浏览器删除多余google应用导致无法开机:开机不成功应该重刷入google gapps包,并没有这样操作而是进 ...

  6. table的 noWrap 属性不换行

    nowrap是什么意思? HTML中td元素的nowrap属性表示禁止单元格中的文字自动换行. 但使用时要注意的是,td元素noWrap属性的行为与td元素的width属性有关. td元素中nowra ...

  7. dedecms安装操作-重安装-开启GD库

    wamp5_1.7.4 打开:http://localhost/install/安装 (输入:域名/install,回车跳转到安装界面,勾选“我已经阅读并同意此协议”,然后点击“继续按钮”.) 重安装 ...

  8. 重装系统windows10/8/7，绝对纯净版永久激活的详细步骤和固态硬盘找不到分区的原因

    简介:重装系统有两种: 一种是在线重装,可实现电脑双系统或多系统,也可单系统(重装在另外一个盘,再去格式化系统盘),这种方式比较麻烦,前提电脑能开机使用,但是一般能启动使用也没人去重装系统,但是不需要 ...

  9. 04-oracle中的视图

    1.创建视图 介绍: 视图(View)通过SELECT查询语句定义,它是从一个或多个表(或视图)导出的,用来导出视图的表称为基表(Base Table),导出的视图称为虚表.在数据库中,只存储视图的定 ...

  10. 浅析HTTP代理原理--转

    代理服务器是HTTP协议中一个重要的组件,发挥着重要的作用. 关于HTTP代理的文章有很多,本文不再赘述,如果不清楚的可以看一下 HTTP代理的基础知识. 本文主要介绍代理的事例,分析一个真实的案例来 ...