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

梦里梦外; 2023-10-03 21:54 4阅读 0赞

### 需求 ###

想隐藏若依框架的侧边栏

### 解决方案 ###

**百度找到的解决方案：**

1.若依官方回复： [怎么隐藏侧边栏和顶部导航栏实现完全的全屏][Link 1]  
2.[【ruoyi+vue】隐藏侧边栏][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')
        },

**实现效果：**  
未隐藏前：  
![在这里插入图片描述][a09165a0a2d3448ab51df8b7a4f40071.png]  
隐藏后：  
![在这里插入图片描述][8a241d4dcb824201a521f9cfe292fcb6.png]

[Link 1]: https://toscode.gitee.com/y_project/RuoYi-Vue/issues/I4XSKH
[ruoyi_vue]: https://blog.csdn.net/weixin_38990605/article/details/125506387
[a09165a0a2d3448ab51df8b7a4f40071.png]: https://img-blog.csdnimg.cn/a09165a0a2d3448ab51df8b7a4f40071.png
[8a241d4dcb824201a521f9cfe292fcb6.png]: https://img-blog.csdnimg.cn/8a241d4dcb824201a521f9cfe292fcb6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java——若依前后端分离修改侧边栏标题和浏览器上的标题

目录一、修改侧边栏标题侧边栏原主题侧边栏主题修改位置二、修改浏览器上的图标与标题修改图标修改标题结语 --------------------

快来打我*/ 2024年04月03日 10:19/ 0 赞/ 31 阅读

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

需求想隐藏若依框架的侧边栏解决方案百度找到的解决方案： 1.若依官方回复： [怎么隐藏侧边栏和顶部导航栏实现完全的全屏][Link 1] 2.[【ru

梦里梦外;/ 2023年10月03日 21:54/ 0 赞/ 5 阅读

相关若依侧边栏如何默认展开？

> 有时候，用户首次进入系统主界面的时候，需要默认展开侧边栏的某些`sub-menu`，可以通过`default-openeds`来进行设置。修改layout\\compo

青旅半醒/ 2023年09月28日 20:57/ 0 赞/ 12 阅读

相关侧边导航栏

<template> <el-container style="height: 100vh" class="menu_container">

阳光穿透心脏的1/2处/ 2022年11月25日 10:12/ 0 赞/ 359 阅读

相关 js实现单击事件和双击事件

一下代码可以解决单击事件和双击事件冲突的问题 //单击事件 var timeoutID = null; $("test).on('click',functi

雨点打透心脏的1/2处/ 2022年11月14日 10:16/ 0 赞/ 212 阅读

相关 vue element menu侧边导航栏

<template>  <!--unique

港控/mmm°/ 2022年10月29日 14:25/ 0 赞/ 71 阅读

相关 intellij idea 自动隐藏侧边栏siderbar

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

浅浅的花香味﹌/ 2021年12月03日 14:29/ 0 赞/ 444 阅读

相关 vue-admin-template 修改侧边栏

(1) 注册路由 router.js---->添加或更改测边框的模块注意：模块的路径 (2) 在Views文件下增加相应的模块.vue (3) 在 conponen

港控/mmm°/ 2021年11月19日 12:12/ 0 赞/ 788 阅读

相关 uni-app双击事件（单击、双击互不干扰）

uni-app中绑定双击事件 > 功能需求在uni-app中，很多时候我们需要元素绑定双击事件，比如自定义的视频播放器，双击播放、暂停，但是显示进度条、隐藏进度条。

╰+哭是因爲堅強的太久メ/ 2021年10月06日 18:52/ 0 赞/ 1339 阅读

相关侧边栏组件(Vue)

从右侧滑入使用方法: 外部传入draw的键,且键值为true开启外部监听@changeShow事件,通过将传入的draw值改为

蔚落/ 2021年07月24日 20:29/ 0 赞/ 722 阅读