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