天天看點

Vue架構中使用ElementUI點選圖檔跳轉後,滾動條不見了

在點選圖檔跳轉的時候,滾動條會消失不見了。網上找了一下答案是說這個是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>
           

點選跳轉遇到滾動條消失的情況時候

Vue架構中使用ElementUI點選圖檔跳轉後,滾動條不見了

解決方法

看看你用的ElementUI是不是2.13.0版本,是的話更新一下版本看看,這個Bug,官方在2.13.1版中已修複。不行再用下面的方法。

方法1

node_modules -> element-ui -> lib -> element-ui.common.js -> 約第38219行的clickHandler方法

添加下面的代碼即可。

在vscode 編輯器中,可以使用快捷鍵 Ctrl + G 跳轉到指定的行數

可能行号不一樣,但是方法名稱一樣的,方法名是clickHandler

Vue架構中使用ElementUI點選圖檔跳轉後,滾動條不見了

方法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标簽,并沒有嵌套在連結裡面。

Vue架構中使用ElementUI點選圖檔跳轉後,滾動條不見了

據說這個Bug,官方在2.13.1版中已修複。于是我打開了Vue的可視化面闆從2.13.0版更新到了2.13.1版,問題解決了!!

Vue架構中使用ElementUI點選圖檔跳轉後,滾動條不見了