解決elementui導(dǎo)航折疊卡頓的問題
更新時間：2024年07月01日 08:41:01 作者：沐沐茶壺
這篇文章主要介紹了解決elementui導(dǎo)航折疊卡頓的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
elementui導(dǎo)航折疊卡頓問題
第一種方法
網(wǎng)上很多建議使用el-aside去進行el-menu包裹，然后去除el-menu的折疊動畫效果，之后給el-aside添加自定義動畫效果控制width變化來實現(xiàn)折疊動畫。
第二種方法
這里提供另一個解決思路，和上面那種異曲同工，沒有使用el-aside去進行布局，而是直接使用的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)文章
vue+webpack 打包文件 404 頁面空白的解決方法
下面小編就為大家分享一篇vue+webpack 打包文件 404 頁面空白的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue3配置代理后頁面500/404問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要給大家介紹了關(guān)于vue3學(xué)習(xí)筆記之自定義組件的相關(guān)資料,組件系統(tǒng)是Vue.js其中一個重要的概念,它提供了一種抽象,讓我們可以使用獨立可復(fù)用的小組件來構(gòu)建大型應(yīng)用,需要的朋友可以參考下2023-08-08
這篇文章主要給大家介紹了關(guān)于Vite版本更新檢查實現(xiàn)頁面自動刷新的解決思路,文中通過實例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細介紹了Vue2單一事件管理組件通信的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
本文主要介紹了el-form-renderer使用教程，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了vue 表單之v-model綁定單選按鈕radio的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了Vue.js之mixins混合組件詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09
淘寶大家都使用過，淘寶滑動驗證碼的目的是為了驗證到底是人還是機器，今天小編給大家分享的是模仿淘寶滑動驗證碼的樣式，感興趣的朋友跟隨小編一起看看吧2019-12-12
這篇文章主要介紹了vue項目首屏打開速度慢的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03