今天給大家講一下‘半自動化’側(cè)邊欄，側(cè)邊欄是導(dǎo)航中經(jīng)常用到的東西，側(cè)邊欄過大會導(dǎo)致內(nèi)容展示不全面，過小在路由跳轉(zhuǎn)時(shí)會不方便，點(diǎn)擊后直接關(guān)閉側(cè)邊欄，如果用戶不熟悉系統(tǒng)操作為了尋找某個(gè)頁面會頻繁地打開和關(guān)閉，這里我們利用store狀態(tài)管理來完成。

    如圖這是我們的側(cè)邊欄，我們使用sideTableNum，sideClickState來判斷狀態(tài)欄狀態(tài)。sideTableNum默認(rèn)為true，sideClickState默認(rèn)為false。Collapse為控制側(cè)邊欄沾卡或者關(guān)閉的值，為一個(gè)布爾值。

    我們要做到，用戶打開側(cè)邊欄，點(diǎn)擊內(nèi)容后鼠標(biāo)移出側(cè)邊欄，一秒后關(guān)閉側(cè)邊欄，用戶不點(diǎn)擊內(nèi)容或點(diǎn)擊內(nèi)容后不移出鼠標(biāo)，側(cè)邊欄不會關(guān)閉。

    首先，先在store中定義幾個(gè)函數(shù)。

    只有sideClickState等于true且sideTableNum為false的情況下才能把側(cè)邊欄關(guān)掉。Debounce是一個(gè)防抖函數(shù)，他規(guī)定這個(gè)函數(shù)只能在一秒內(nèi)沒有重復(fù)觸發(fā)的情況下執(zhí)行。

    然后我們在側(cè)邊欄組件中，為側(cè)邊欄的組件整體設(shè)置鼠標(biāo)移入和鼠標(biāo)移出事件，并未側(cè)邊欄選項(xiàng)設(shè)置點(diǎn)擊事件如下圖所示。

    這樣，當(dāng)我們點(diǎn)擊側(cè)邊欄并且移出鼠標(biāo)的時(shí)候才能正確觸發(fā)offsideTable事件，把isCollapse的值變?yōu)閠rue來關(guān)閉側(cè)邊欄，如果沒有點(diǎn)擊內(nèi)容或者移出鼠標(biāo)，將會導(dǎo)致判斷中并不會走到改變isscollase值的選擇中，也就是菜單欄不會關(guān)閉。