Vue clicks on the double-click event, if the sidebar is hidden according to the frame

need

Want to hide the sidebar of Zoyi frame

solution

The solution Baidu found:

1. Ruoyi's official reply: How to hide the sidebar and top navigation bar to achieve a complete full screen
2. 【ruoyi+vue】Hide the sidebar

Following the solution, I found that the effect could not be achieved, so I directly started with the css style.

My solution:

HTML binds the single-click event:

<div class="datashow-page"  @click="sideBarClick" @dblclick="sideBarClickCancle" ></div>

Add the method of clicking and double-clicking in the method

    //单击隐藏侧边栏
    sideBarClick() {
    
    
     const element = document.getElementsByClassName('sidebar-container')[0];
     element.setAttribute('style','display: none');
     //统一全屏后的背景颜色
     const el = document.getElementsByTagName('body')[0];
     el.setAttribute('style','background: #081832');
    },
    sideBarClickCancle() {
    
    
     //双击显示侧边栏
     const element = document.getElementsByClassName('sidebar-container')[0];
     element.setAttribute('style','display: block')
    },

Achievement effect:
before hiding:

after hiding: