vue2+element打开抽屉自动跳转到页面最顶端问题

最新推荐文章于 2024-06-12 13:40:55 发布
最新推荐文章于 2024-06-12 13:40:55 发布
阅读量661 收藏
点赞数
分类专栏： vue 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woysihsb/article/details/128786764
版权

情况说明：

父组件中存放着路由组件，抽屉组件

当路由组件（子组件）中执行打开抽屉操作的时候，滚动到中部或底部的滚动条自动滚动到页面的最顶端

问题原因：

抽屉组件的遮罩层导致

暂时不确定为啥，但是试错试出来了是遮罩层的问题

解决方法：

关闭遮罩层

在这里插入图片描述

    <el-drawer
        :visible.sync="drawer"
        :modal="false"
    >
Vue+element-ui实现网页右侧快捷导航栏 Vue实现全局右侧快捷菜单功能组件
weixin_41346436的博客
10-30 236
【代码】Vue+element-ui实现网页右侧快捷导航栏 Vue实现全局右侧快捷菜单功能组件。
Vue+Element实现网页版个人简历系统
jx69693678nab的博客
12-30 8924
这篇文章介绍一个使用Vue+Element实现的个人简历系统，主要用到的技术有：vue、element、css3、css定位。 　　作者在window10进行开发，目前只在chrome上进行过测试，没有大的毛病。但是还有很多小功能还不完善，代码也未进行优化，后续会继续完善功能，优化代码。 　　声明：项目相对来说就是一个纯静态页面，代码都比较简单，大佬可闭眼绕过，或者看一眼留下宝贵意见也可 一...
vue组件中刷新数据自动滚动到顶部
shimeifang11的博客
09-16 2031
项目中有个需求，数据变动时，滚动条自动滚到顶部 在监听数据调接口时触发一下置顶方法：this.backTop(); // 置顶 backTop() { let scrollTop = this.$refs.detailDrawer.$refs.drawer.pageYOffset || this.$refs.detailDrawer.$refs.drawer.scrollTop || this.$refs.detailDraw.
vue组件之回到顶部
qcg14774125的博客
02-03 356
<template> <transition name="el-fade-in"> <div class="upBack" @click="backTop()"> <img src="../../../static/image/home/up.png" alt=""> </div> </transition> </template> <script> export de.
Vue后台管理系统页面每次点击跳转位置回恢复在顶部
qq_42384734的博客
04-25 574
因后台侧边栏的菜单过长，导致点击底下的菜单，内容显示下面的内容 在router里的index.js文件最下面配置一下 router.beforeEach((to, from, next) => { document.body.scrollTop = 0 // firefox document.documentElement.scrollTop = 0 next() }) ...
vue element点击分页，页面跳回顶部
蓦然回首，那人却在，灯火阑珊处。
03-10 1968
// 翻页后滚动条回到页面顶端 scrollTop (selector) { let element = selector && document.querySelector(selector) || window; element.scrollTo(0, 0); }, // 监听 页码值 改变的事件 handleCurrentChange (newPage) { // console.log(newPage);
解决element-ui中的el-table中列更新问题以及滚动条会重置到最顶部的问题
Wang__dream的博客
12-19 7561
解决elementui中el-table列行或列数据更新的问题，例如滚动条会重置到最顶部
Vue跳转页面默认滚动到顶部（全网最详细）
weixin_74095707的博客
12-30 1799
Vue跳转页面默认滚动到顶部（全网最详细）
Vue2+3入门到实战
Blue92120的博客
07-04 501
黑马前端老师介绍到：现在很多公司仍然在用Vue2，也在维护Vue2的老项目，当然Vue3也在快速发展，为了让大家清楚的知道前端需掌握的必备技能，播妞特地采访了一位从黑马毕业 5 年，并一直在前端领域“摸爬滚打”的学长。对于前端技术，他说得最多的便是：想在前端领域立足，一定要学好前端三剑客（HTML+CSS+Js），其次便是。教程包含Vue2.x + Vue3.x + 实战项目，以及最新Vue3语法，紧跟前端最新生态。教程包含 20+ 实战案例，2 大企业项目实战，通过综合实战，强化你真实企业开发能力。
ElementUI之首页导航及左侧菜单（模拟实现）
09-26
ElementUI是一款基于Vue.js的开源组件库，它提供了丰富的UI组件，能够帮助开发者快速搭建美观、响应式的界面。 首先，让我们了解ElementUI的基础。ElementUI是一套为开发者、设计师和产品经理准备的基于Vue2.0的...
vue-element-admin的抽屉组件
09-23
抽屉组件是Vue-Element-Admin中一种常见的UI组件，通常用于在界面上打开一个侧边栏，展示与当前页面相关的信息或操作。抽屉组件通常由一个触发按钮和一个侧边栏组成，在点击触发按钮后，侧边栏会从页面的侧边滑出，...
vue页面跳转自动滚动到页面最上方
qq_48637533的博客
10-06 2593
vue-router实现滚动行为
Element ui分页切换页面回到顶部
weixin_43585219的博客
12-20 1316
document.querySelector(".body").parentNode.scrollTop=0 针对这一行 1、document.querySelector（）方法返回文档中匹配指定 CSS 选择器的一个元素。 注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。 2、由此可以获取元素的DOM节点 3、scrollTop为滚动条的垂直偏移，是拥有滚动条元素的属性，如下，切换页数时，若想使列表回到顶部，其拥有scrollTop的元素为el-main，而不是列表本身
element admin 跳转页面 ，页面回到顶部
qToHoTp的博客
09-08 546
该方法的主要要点，是需要在index.vue文件上让<app-main>标签回到顶部，但是在index.vue文件里面不知道页面的跳转，所以需要将方法传输到子组件中，让子组件 使用父组件的方法，使得能够执行backup方法。 <!-- src/layout/index/index.vue --> <div class="indexlayout-right-main" id="indexLayoutRight" style="background-color: #f1f4f5;"
element UI table滚动条切换页码后回到顶部
weixin_39143969的博客
05-09 4842
table切换页码后滚动条保持在顶部，直接上代码，亲测： 在切换页码的方法内写 handleCurrentChange() { this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …> { this.refs.tabledns.bodyWrapper.scrollTop=0; }) } ...
vue elementUI 对话框Dialog 打开后滚条回到顶部
progrmmmm的博客
11-29 3128
正常情况下网页虽然不会显示滚动条了,但是不会回到顶部. 1.点击弹出对话框的标签是a标签,而且加了href,去掉href就可以了.
Vue2后台管理：项目开发全流程(二)
最新发布
唯见青山不见君
06-12 1635
Vue2后台管理：项目开发全流程(二)
vue--后台管理系统问题和功能实现思路集锦
weixin_51040108的博客
10-26 5577
vue--后台管理系统问题和功能实现思路集锦
【项目经验】elementui抽屉（从下到上方向）实现向上拉伸
weixin_70245286的博客
09-06 1007
elementui抽屉二次封装（可以向上拉伸）改变抽屉高度
Vue中滚动条回到顶部及动画化（缓慢回滚）
xinshishenchao的博客
04-08 3654
开发首页出现滚动条回到顶部的需求，也不能直接回到，要缓慢回滚。 旧项目使用的是JQuery的 $("html,body").animate({scrollTop:0},500); //动画化滚动到顶部。varscrolltop=$(this).scrollTop();//位置 新项目使用Vue开发，首先遇到的问题是网上查询的所有回到顶部方法均无效。找朋友远程帮忙检查了一下，原来是html...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卡卡卡骨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值