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