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