如何解決Element UI中NavMenu折疊菜單的坑
更新時間：2024年07月01日 08:50:42 作者：浮生醉清風~
這篇文章主要介紹了如何解決Element UI中NavMenu折疊菜單的坑,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Element UI左側折疊菜單的坑
在使用Element ui里NavMenu折疊菜單的時候 會遇到側邊導航欄收縮后，右側內容不能一起收縮的問題和側邊欄折疊的卡頓一下的問題
1.解決側邊導航欄收縮后
右側內容不能一起收縮的問題？
在點擊收縮以后，右側不會跟著一起收縮
解決辦法(修改width值)
2.解決ElementUi Nav側邊欄折疊的卡頓一下的問題
使用ElementUi Nav側邊欄自帶的折疊動畫，文字會卡頓一下再消失，非常難受解決方案
使用官方的折疊動畫沒有，所以我的方案是開啟折疊動畫后解決滾動條的問題，自己寫個過渡，再把文字消失的速度加快，這樣能比較流暢的折疊展開
/* 加過渡給側邊導航*/
.el-aside {
transition: width 0.25s;
-webkit-transition: width 0.25s;
-moz-transition: width 0.25s;
-webkit-transition: width 0.25s;
-o-transition: width 0.25s;
}
/*加快側邊欄文字消失的速度*/
.el-menu {
transition: all 10ms;
}
Element ui NavMenu導航菜單折疊后template中的內容不顯示
這個應該是高版本vuecli對elementUI不支持的緣故。
解決這個問題的方式
再template中加v-slot:title
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本文會通過一個簡單的vue-toast插件，來幫助了解掌握插件的開發(fā)和使用。具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)二級彈框案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
Vue中div contenteditable 的光標定位方法
今天小編就為大家分享一篇Vue中div contenteditable 的光標定位方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue cli如何配置開發(fā)環(huán)境下的sourcemap
這篇文章主要介紹了vue cli如何配置開發(fā)環(huán)境下的sourcemap問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
vue2使用element-ui,el-table不顯示,用npm安裝方式
這篇文章主要介紹了vue2使用element-ui,el-table不顯示,用npm安裝方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue模塊移動組件的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
vue單文件組件lint error自動fix與styleLint報錯自動fix詳解
這篇文章主要給大家介紹了關于vue單文件組件lint error自動fix與styleLint報錯自動fix的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
使用elementuiadmin去掉默認mock權限控制的設置
這篇文章主要介紹了使用elementuiadmin去掉默認mock權限控制的設置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家介紹了Vue3必學技巧-自定義Hooks-讓寫Vue3更暢快示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)圖形驗證碼登錄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04