vue框架实现将侧边栏完全隐藏

更新时间：2022年08月13日 16:06:59 作者：等樱花的龙猫

这篇文章主要介绍了vue框架实现将侧边栏完全隐藏，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue框架将侧边栏完全隐藏

如何将vue的左侧边栏在缩进的时候完全隐藏呢

效果图如下

找到目录src/style/sidebar.scss 然后搜索.hideSidebar可以搜出两个，不要慌，下面的时手机端的，我们拉到上面的.hideSidebar找到

.hideSidebar {
    .sidebar-container {
      width: 54px !important;
    }
    .main-container {
      margin-left: 54px;
    }

修改.sidebar-container与.main-container里的内容

.sidebar-container {
      width: 54px !important;
      pointer-events: none;
      transition-duration: 0.3s;
      transform: translate3d(-$sideBarWidth, 0, 0);
    }
    //这个是展示/隐藏按钮所在的这个条条距离左侧位置，自己调一下就能看出效果了
    .main-container {
      margin-left: 0px;
    }

好了，成功了，缩进的时候就不会展示小菜单栏了

vue-element-admin隐藏侧边栏

在 src/style/sidebar.scss 里搜索hideSidebar找到以下部分

.hideSidebar {
    .sidebar-container {
      width: 54px !important;
    }
    .main-container {
      margin-left: 54px;
    }

修改为

.sidebar-container {
      width: 54px !important;
      pointer-events: none;
      transition-duration: 0.3s;
      transform: translate3d(-$sideBarWidth, 0, 0);
    }
    .main-container {
      margin-left: 0px;
    }

此时电脑端侧边栏位置会显示一块空白部分

解决办法

在 src\layout\components\index.js 里注释掉侧边栏部分

export { default as AppMain } from './AppMain'
export { default as Navbar } from './Navbar'
export { default as Settings } from './Settings'
// export { default as Sidebar } from './Sidebar/index.vue'
export { default as TagsView } from './TagsView/index.vue'

侧边栏彻底隐藏成功

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue项目实现面包屑导航
这篇文章主要为大家详细介绍了vue项目实现面包屑导航，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue实现自定义表格工具扩展
这篇文章主要为大家详细介绍了vue实现自定义表格工具扩展，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
element基于el-form智能的FormSmart表单组件
本文主要介绍了element基于el-form智能的FormSmart表单组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
Vue分别运用class绑定和style绑定通过点击实现样式切换
这篇文章主要为大家介绍了Vue分别运用class绑定和style绑定通过点击实现样式切换，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
vue使用动态组件实现TAB切换效果
这篇文章主要介绍了vue使用动态组件实现TAB切换效果的方法，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-05-05
vue 左滑删除功能的示例代码
这篇文章主要介绍了vue 左滑删除功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-01-01
vue各种事件监听实例(小结)
这篇文章主要介绍了vue各种事件监听实例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
Vue使用mockjs问题(返回数据、get、post 请求)
这篇文章主要介绍了Vue使用mockjs问题(返回数据、get、post 请求)，具有很好的参考价值，希望对大家有所帮助。
2023-05-05
Vue+Echart柱状图实现疫情数据统计
这篇文章主要介绍了在Vue nuxt项目中，如何使用Echart(百度图表)柱状图来实现疫情数据统计，感兴趣的小伙伴可以跟随小编一起学习一下
2021-12-12
Vue实现导出Excel表格文件提示“文件已损坏无法打开”的解决方法
xlsx用于读取解析和写入Excel文件的JavaScript库,它提供了一系列的API处理Excel文件,使用该库,可以将数据转换Excel文件并下载到本地,适用于在前端直接生成Excel文件,这篇文章主要介绍了Vue实现导出Excel表格,提示文件已损坏,无法打开的解决方法,需要的朋友可以参考下
2024-01-01