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

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

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

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

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

    然后我們?cè)趥?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來(lái)關(guān)閉側(cè)邊欄，如果沒(méi)有點(diǎn)擊內(nèi)容或者移出鼠標(biāo)，將會(huì)導(dǎo)致判斷中并不會(huì)走到改變isscollase值的選擇中，也就是菜單欄不會(huì)關(guān)閉。