解決elementui導(dǎo)航折疊卡頓的問題
更新時間：2024年07月01日 08:41:01 作者：沐沐茶壺
這篇文章主要介紹了解決elementui導(dǎo)航折疊卡頓的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
elementui導(dǎo)航折疊卡頓問題
第一種方法
網(wǎng)上很多建議使用el-aside去進(jìn)行el-menu包裹，然后去除el-menu的折疊動畫效果，之后給el-aside添加自定義動畫效果控制width變化來實現(xiàn)折疊動畫。
第二種方法
這里提供另一個解決思路，和上面那種異曲同工，沒有使用el-aside去進(jìn)行布局，而是直接使用的el-menu實現(xiàn)的側(cè)邊欄，去掉側(cè)邊欄的折疊動畫效果，之后把折疊動畫效果交給右側(cè)頭部導(dǎo)航的展開收起按鈕，通過它控制left屬性變化實現(xiàn)。
核心代碼實現(xiàn)：
- 側(cè)邊欄部分：
- 右側(cè)頭部導(dǎo)航部分：
第三種方法
更簡單的方法實現(xiàn)，前提還是通過右側(cè)頭部導(dǎo)航的展開收起按鈕控制left屬性變化實現(xiàn)折疊動畫或者通過el-aside按照第一種方式實現(xiàn)折疊動畫后，不用關(guān)閉el-menu本身動畫，而是給el-menu添加class，
之后加上如下樣式即可。
// 解決側(cè)邊欄折疊卡頓的問題
.new-el-menu--sidebar:not(.el-menu--collapse) {
width: 220px;
}
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)旋轉(zhuǎn)木馬動畫，圖片數(shù)量無限制，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了用vue構(gòu)建多頁面應(yīng)用的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
vue單頁面應(yīng)用打開新窗口顯示跳轉(zhuǎn)頁面的實例
今天小編就為大家分享一篇vue單頁面應(yīng)用打開新窗口顯示跳轉(zhuǎn)頁面的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家介紹了vue element plus多語言切換，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了Vue實現(xiàn)剪貼板復(fù)制功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
這篇文章主要介紹了Vue獲取DOM元素并修改屬性或者樣式，文中通過兩種方法給大家介紹了vue 如何獲取并操作DOM元素,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了Vue自定義詢問彈框和輸入彈框,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
vue tab切換,解決echartst圖表寬度只有100px的問題
這篇文章主要介紹了vue tab切換,解決echartst圖表寬度只有100px的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
今天小編就為大家分享一篇vue.js input框之間賦值方法具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
ESLint在Vue3?+?TypeScript中的配置與使用方法
在Vue項目中配置ESLint,可以確保代碼風(fēng)格的一致性和代碼質(zhì)量,這篇文章主要介紹了ESLint在Vue3+TypeScript中配置與使用方法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-12-12