鍍金池/ 問答/HTML5  HTML/ VUE+ElementUI開發(fā)后臺(tái)功能，隱藏左側(cè)菜單欄再展開有白框

VUE+ElementUI開發(fā)后臺(tái)功能，隱藏左側(cè)菜單欄再展開有白框

最近使用VUE+ElementUI開發(fā)后臺(tái)功能，部署跑起來之后發(fā)現(xiàn)點(diǎn)擊最小化左側(cè)菜單然后再展開就會(huì)出現(xiàn)個(gè)白框，不知道怎么辦，望大神幫忙，不勝感激！

clipboard.png

回答
編輯回答
有你在

是你布局的問題，你可以動(dòng)態(tài)控制左側(cè)菜單的寬度。

2018年6月24日 23:36
編輯回答
情皺

謝謝1樓回復(fù)，問題已解決，根據(jù)csdn評(píng)論區(qū)的大神代碼，原理和1樓說的一樣。貼代碼：

在methods里的collapse 函數(shù)里增加監(jiān)測(cè)左邊導(dǎo)航欄offsetWidth值為0則修改,因?yàn)橐@取元素的offsetwidth屬性，所以記得給元素加個(gè)ID值，我的是lastclass,加完后如下：

<!--導(dǎo)航菜單-->
                <el-menu :default-active="$route.path" id="lastclass" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
                     unique-opened router v-show="!collapsed">

修改函數(shù)如下：

collapse:function(){
                this.collapsed=!this.collapsed;
                var uiwidth = document.getElementById('lastclass');
                if(uiwidth.offsetWidth===0){
                    uiwidth.style.width = "230px"
                }
            },
2017年3月10日 05:55