Vue单击双击事件，若依框架隐藏侧边栏

需求

想隐藏若依框架的侧边栏

解决方案

百度找到的解决方案：

1.若依官方回复： 怎么隐藏侧边栏和顶部导航栏实现完全的全屏
2.【ruoyi+vue】隐藏侧边栏

跟着解决方案走，发现实现不了效果，因此直接对css样式下手了。

我的解决方案：

html 绑定好单双击事件：

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

在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')
    },

实现效果：
未隐藏前：

隐藏后：