vue+elementUi 点击图片跳后,页面滚动条消失了
使用el-image跳转到新页面后,页面的滚动条消失了,并且HTML的body被加上了overflow:hidden属性。在项目中没有找到相应的属性添加代码,百度才发现是elementUi的bug。项目比较老旧,element-ui的版本较低,所以存在这个问题。
结构代码
<el-card
v-for="(item,index) in imageList"
:key="item.id">
<div slot="header">
<router-link :to="item.path">
<el-image :src="item.url" lazy>
</router-link>
</div>
</el-card>
解决办法
1.将element-ui更新至2.13.1版本,该版本官方修复了这个bug。
2.给body设置属性
// 通过路由设置
router.afterEach((to, from, next) => {
document.querySelector("body").setAttribute("style", "overflow: auto !important;")
});