今天給大家講一下‘半自動化’側邊欄，側邊欄是導航中經常用到的東西，側邊欄過大會導致內容展示不全面，過小在路由跳轉時會不方便，點擊后直接關閉側邊欄，如果用戶不熟悉系統操作為了尋找某個頁面會頻繁地打開和關閉，這里我們利用store狀態管理來完成。
如圖這是我們的側邊欄，我們使用sideTableNum，sideClickState來判斷狀態欄狀態。sideTableNum默認為true，sideClickState默認為false。Collapse為控制側邊欄沾卡或者關閉的值，為一個布爾值。
我們要做到，用戶打開側邊欄，點擊內容后鼠標移出側邊欄，一秒后關閉側邊欄，用戶不點擊內容或點擊內容后不移出鼠標，側邊欄不會關閉。
首先，先在store中定義幾個函數。
只有sideClickState等于true且sideTableNum為false的情況下才能把側邊欄關掉。Debounce是一個防抖函數，他規定這個函數只能在一秒內沒有重復觸發的情況下執行。
然后我們在側邊欄組件中，為側邊欄的組件整體設置鼠標移入和鼠標移出事件，并未側邊欄選項設置點擊事件如下圖所示。
這樣，當我們點擊側邊欄并且移出鼠標的時候才能正確觸發offsideTable事件，把isCollapse的值變為true來關閉側邊欄，如果沒有點擊內容或者移出鼠標，將會導致判斷中并不會走到改變isscollase值的選擇中，也就是菜單欄不會關閉。
