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

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

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

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

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

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

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