如何解決Element UI中NavMenu折疊菜單的坑
更新時(shí)間：2024年07月01日 08:50:42 作者：浮生醉清風(fēng)~
這篇文章主要介紹了如何解決Element UI中NavMenu折疊菜單的坑,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Element UI左側(cè)折疊菜單的坑
在使用Element ui里NavMenu折疊菜單的時(shí)候 會(huì)遇到側(cè)邊導(dǎo)航欄收縮后，右側(cè)內(nèi)容不能一起收縮的問題和側(cè)邊欄折疊的卡頓一下的問題
1.解決側(cè)邊導(dǎo)航欄收縮后
右側(cè)內(nèi)容不能一起收縮的問題？
在點(diǎn)擊收縮以后，右側(cè)不會(huì)跟著一起收縮
解決辦法(修改width值)
2.解決ElementUi Nav側(cè)邊欄折疊的卡頓一下的問題
使用ElementUi Nav側(cè)邊欄自帶的折疊動(dòng)畫，文字會(huì)卡頓一下再消失，非常難受解決方案
使用官方的折疊動(dòng)畫沒有，所以我的方案是開啟折疊動(dòng)畫后解決滾動(dòng)條的問題，自己寫個(gè)過渡，再把文字消失的速度加快，這樣能比較流暢的折疊展開
/* 加過渡給側(cè)邊導(dǎo)航*/
.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;
}
/*加快側(cè)邊欄文字消失的速度*/
.el-menu {
transition: all 10ms;
}
Element ui NavMenu導(dǎo)航菜單折疊后template中的內(nèi)容不顯示
這個(gè)應(yīng)該是高版本vuecli對elementUI不支持的緣故。
解決這個(gè)問題的方式
再template中加v-slot:title
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue自定義實(shí)現(xiàn)計(jì)算器組件(附完整代碼)
這篇文章主要為大家詳細(xì)介紹了如何使用Vue自定義實(shí)現(xiàn)一個(gè)計(jì)算器組件,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2025-06-06
vue中的attribute和property的具體使用及區(qū)別
本文主要介紹了vue中的attribute和property的具體使用及區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue實(shí)現(xiàn)設(shè)置載入動(dòng)畫和初始化頁面動(dòng)畫效果
今天小編就為大家分享一篇vue實(shí)現(xiàn)設(shè)置載入動(dòng)畫和初始化頁面動(dòng)畫效果，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue項(xiàng)目實(shí)現(xiàn)m3u8流媒體播放詳細(xì)圖文教程
m3u8是一種常用的視頻流媒體格式,通常用于在Web上播放視頻,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)現(xiàn)m3u8流媒體播放的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
這篇文章主要給大家介紹了關(guān)于vue watch監(jiān)控對象的簡單方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Vue中$router.push()路由切換及如何傳參和獲取參數(shù)
這篇文章主要給大家介紹了關(guān)于Vue中$router.push()路由切換及如何傳參和獲取參數(shù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細(xì)介紹了Vuex實(shí)現(xiàn)購物車小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
Nginx部署前端Vue項(xiàng)目的步驟、常見問題與解決方案
在現(xiàn)代Web開發(fā)中,Vue.js成為前端開發(fā)者構(gòu)建單頁應(yīng)用的熱門框架,Nginx以其高性能和穩(wěn)定性,成為部署Vue項(xiàng)目的理想選擇,這篇文章主要介紹了Nginx部署前端Vue項(xiàng)目的步驟、常見問題與解決方案,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了關(guān)于element-ui圖片上傳組件查看和限制方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue組件傳值的實(shí)現(xiàn)方式小結(jié)【三種方式】
這篇文章主要介紹了vue組件傳值的實(shí)現(xiàn)方式,結(jié)合實(shí)例形式總結(jié)分析了vue.js組建傳值的三種實(shí)現(xiàn)方式,包括父傳子、子傳父及非父子傳值,需要的朋友可以參考下2020-02-02