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

_Shanene

已于 2022-12-16 10:20:16 修改

阅读量2.9k

点赞数 1

分类专栏：公共资产管理组件文章标签： vue.js javascript 前端

于 2022-11-29 10:59:04 首次发布

本文链接：https://blog.youkuaiyun.com/someday____/article/details/128092646

版权

公共资产管理组件专栏收录该内容

9 篇文章

订阅专栏

本文分享了如何通过自定义CSS解决在使用若依框架时隐藏侧边栏的问题，包括HTML事件绑定和方法实现，以及前后显示状态的对比。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

想隐藏若依框架的侧边栏

解决方案

百度找到的解决方案：

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