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项目中,输入框只允许输入数字,现将自己使用的一种方法记录,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
2023-11-11
Vue实现自定义组件改变组件背景色(示例代码)
要实现 Vue 自定义组件改变组件背景色,你可以通过 props 将背景色作为组件的一个属性传递给组件,在组件内部监听这个属性的变化,并将其应用到组件的样式中,下面通过示例代码介绍Vue如何实现自定义组件改变组件背景色,感兴趣的朋友一起看看吧
2024-03-03
Vue数据劫持详情介绍
这篇文章主要介绍了Vue数据劫持详情介绍，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下，希望对你的学习有所帮助
2022-08-08
Vue3定义全局变量的方式总结(附代码)
vue创建全局变量和方法有很多种,下面这篇文章主要给大家介绍了关于Vue3定义全局变量的方式,文中通过代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考借鉴价值,需要的朋友可以参考下
2024-04-04
Vue各种loader的基本配置与使用示例教程
这篇文章主要介绍了Vue 各种loader的基本配置与使用，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-01-01
Vue+Echarts实现柱状折线图
这篇文章主要为大家详细介绍了Vue+Echarts实现柱状折线图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
使用echarts点击按钮从新渲染图表并更新数据
这篇文章主要介绍了使用echarts点击按钮从新渲染图表并更新数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
三分钟让你快速学会axios在vue项目中的基本用法(推荐!)
Axios是一个基于Promise用于浏览器和nodejs的HTTP客户端,下面这篇文章主要给大家介绍了如何通过三分钟让你快速学会axios在vue项目中的基本用法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-04-04
vue-cli初始化项目中使用less的方法
vue-cli 是 vue.js 的脚手架工具，可以帮助我们编写基础代码、快速搭建开发环境。下面这篇文章主要给大家介绍了关于vue-cli初始化项目中使用less的相关资料，需要的朋友可以参考借鉴，下面随着小编来一起看看吧
2018-08-08
vue中的搜索关键字实例讲解
这篇文章主要介绍了vue中的搜索关键字实例讲解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04