您的位置:首页 > 游戏 > 游戏 > 网络seo推广培训_专业动漫如何制作_网络推广怎样做_百度推广代理商名单

网络seo推广培训_专业动漫如何制作_网络推广怎样做_百度推广代理商名单

2025/3/9 22:29:56 来源:https://blog.csdn.net/RedaTao/article/details/145844933  浏览:    关键词:网络seo推广培训_专业动漫如何制作_网络推广怎样做_百度推广代理商名单
网络seo推广培训_专业动漫如何制作_网络推广怎样做_百度推广代理商名单

一、问题描述

页面A中包含列表数据,每条列表最后一栏【更多】是el-dropdown实现的下拉框,点击其中一项,路由跳转到页面B。
问题 :跳转页面B后,发现页面A中的el-dropdown内容,有时会在页面左上角一直显示。如下图:
在这里插入图片描述
页面B左上角,显示页面A的dropdown元素:
在这里插入图片描述

二、解决办法:

  1. 页面A,给dropdown组件设置一个class类名,便于后续操作:
    添加class类名
  2. 页面B created周期中,手动将所有dropdown元素隐藏/移除 (因为我这里是嵌套在micro-app中不便移除,所以采用的隐藏):
    在这里插入图片描述
Tips:

如果想要 路由跳转时 全局隐藏/删除所有dropdown元素,可以如下操作:

  1. 使用路由守卫,监听路由跳转时 隐藏/删除;
  2. 在 App.vue 中监听路由跳转;

三、问题分析

项目使用keep-alive做了组件缓存,跳转到页面B时,页面A的实例会被缓存,并不会被销毁。
其中的dropdown元素也会残留在body元素上(挂载到body是element默认行为)
在这里插入图片描述

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com