在點選圖檔跳轉的時候,滾動條會消失不見了。網上找了一下答案是說這個是bug,原因就是頁面跳轉後,body被加上了
style="overflow: hidden;"
的樣式。
vue檔案的内容如下
<router-link to="../index" title="二手交易平台">
<el-image style="width:100px; height: 100px" src="../logo_green.png" fit="fit"></el-image>
</router-link>
點選跳轉遇到滾動條消失的情況時候
解決方法
看看你用的ElementUI是不是2.13.0版本,是的話更新一下版本看看,這個Bug,官方在2.13.1版中已修複。不行再用下面的方法。
方法1
在
node_modules -> element-ui -> lib -> element-ui.common.js -> 約第38219行的clickHandler方法
添加下面的代碼即可。
在vscode 編輯器中,可以使用快捷鍵 Ctrl + G 跳轉到指定的行數
可能行号不一樣,但是方法名稱一樣的,方法名是clickHandler
方法2
給body設定屬性
overflow: auto !important;
或者通過路由給body設定屬性
router.afterEach((to, from, next) => {
document.querySelector("body").setAttribute("style", "overflow: auto !important;")
});
或者給圖檔綁定事件來跳轉吧,不要用a和router-link的方式
再次遇到相似問題
再次遇到Element UI 點選 el-image 元件,出現視窗滾動條消失的問題。因為上次我是用
overflow: auto !important;
的方法解決的,這次又遇到了,不同的是這次僅有圖檔el-image标簽,并沒有嵌套在連結裡面。
據說這個Bug,官方在2.13.1版中已修複。于是我打開了Vue的可視化面闆從2.13.0版更新到了2.13.1版,問題解決了!!