今天使用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. 【MT】牛津的MT教程

    Preamble This repository contains the lecture slides and course description for the Deep Natural Lan ...

  2. 构建自定义docker镜像，上传至docker hub

    docker 优势 (外部参考) Docker 让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后 发布到任何流行的Linux机器上,便可以实现虚拟化.Docker改变了虚拟化的方 式,使 ...

  3. 为知笔记Linux版编译使用记录

    本文档长期不定时更新,根据使用情况进行反馈. 目录 编译 Error creating SSL context 无法输入中文 如何打包使用 桌面图标 Markdown Windows 版本差异 常用快 ...

  4. FWT（快速沃尔什变换）小结

    在多项式卷积的处理中,我们实际上实现的是下面的一个式子 \[ C_k=\sum_{i+j=k}A_iB_j \] 然而事实上有些和(sang)蔼(xin)可(bing)亲(kuang)的出题人,并不会 ...

  5. Magento 2 自带模态的应用

    Modal widget in Magento 2 Magento 2 自带模态的应用 使用magento 2 的自带模态组件,以下代码只供参考使用. 1,DOM >模态块与触发元素 .pthm ...

  6. CSS3基础入门02

    CSS3 基础入门02 边框相关属性 border-radius 通过这个属性我们可以设置边框圆角,即可以将四个角设置为统一的圆角,也可以单独的设置具体的某一个角的圆角. grammer: borde ...

  7. 20165223《网络对抗技术》Exp2 后门原理与实践

    目录 -- 后门原理与实践 后门原理与实践说明 实验任务 基础知识问答 常用后门工具 实验内容 任务一:使用netcat获取主机操作Shell,cron启动 任务二:使用socat获取主机操作Shel ...

  8. ElasticSearch常用操作

    查看某个INDEX库某个TYPE表,某个字段的分词结果  GET /${index}/${type}/${id}/_termvectors?fields=${fields_name}http://19 ...

  9. python自动启动appium服务

    我们可以通过socket模块来检查appium是否启动,如果未启动,可以通过subprocess模块来启动,需要导入socket和subprocess模块,具体如下图: 第1个函数:表示检查appiu ...

  10. 【转】STM32 FSMC总线深入研究

    原文:http://group.chinaaet.com/116/48112 由于CPU与FPGA通信的需要,以及对8080总线的熟悉,首选采用了STM32的FSMC总线,作为片间通信接口.FSMC能 ...