概述
我个人在开发中比较喜欢使用ivew的组件,看起来比elementui组件要大气,哈哈,今天我这里记录一下最近项目使用iview中的弹窗组件遇到的一些问题。
需求
在我做的项目首页需要一个弹窗,然后里面渲染对应的树形结构的内容,点击不同层级可以跳转到对应的列表筛选路由页面,照理说,这样没毛病把,但是点击跳转的时候,我到了另一个路由页面,发现内容多出可视区的时候,居然滚顶条不见了,这个问题我找了好久才发现。这里记录一下问题的原因。
项目问题示例图
- 点击弹窗展示,注意开始的时候,body身上是没有样式的
- 接着弹窗组件显示,会发现,组件显示的时候会默认给body身上加上多余样式,此时是无法滚动页面的
- 接下来我们点击其中的内容,进行页面跳转(一个新的路由组件)
另一个路由页面,会发现,弹窗组件虽然关闭了,路由页面也切换了,但是弹窗组件的打开时候的样式却还留着,此时就出问题了,页面无法滚动了,只有刷新页面了。
解决方案
本以为,在待跳转页面跳转之前将控制弹窗组件的变量主动设置为fale,发现不生效,最后只有在跳转页面组件销毁前将body身上的样式主动移除掉才行。
总结
一个小小的踩坑,可能这种场景不常见,但是出问题了还真不容易发现,记录一下。(参看项目地址(etextbook.hep.com.cn)