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

目录
  • vue框架将侧边栏完全隐藏
  • vue-element-admin隐藏侧边栏
    • 解决办法

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'

侧边栏彻底隐藏成功

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

赞 (0)

相关推荐

  • vue实现侧边栏导航效果

    vue实现侧边栏导航效果

    本文实例为大家分享了vue侧边栏导航的具体代码,供大家参考,具体内容如下 最终效果 点击下一个导航,上一个导航自动收回 实现代码 1.下载vue-router npm install vue-router --save-dev 2.在main.js中引入 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) // 引入路由 3.在components中新建组件 3.1 agencySearch.vue组件 代码

  • vue实现三级导航展示和隐藏

    vue实现三级导航展示和隐藏

    本文实例为大家分享了vue实现三级导航展示和隐藏的具体代码,供大家参考,具体内容如下 需求描述: 要实现侧边栏三级导航的显示和隐藏.点击其中一个一级导航,展示该一级导航的二级导航,再点击关闭该二级导航.一级导航的其他项,展开二级导航.关闭其他一级导航的二级导航. 效果如下: 代码: <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"

  • 在vue中实现某一些路由页面隐藏导航栏的功能操作

    为了将导航栏显示在每一个页面中,可以将导航栏与<router-view>放在同一级显示,如下: <header> ... </header> <router-view></router-view> 但是,在某些时候,我们需要隐藏导航栏显示,比如登录界面,为了实现导航栏的隐藏,可以使用如下代码: <header v-show="$route.name!=='login'"> ... </header> &

  • vue.js 左侧二级菜单显示与隐藏切换的实例代码

    废话不多说了,直接给大家贴代码了, 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style type

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

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

    目录 vue框架将侧边栏完全隐藏 vue-element-admin隐藏侧边栏 解决办法 vue框架将侧边栏完全隐藏 如何将vue的左侧边栏在缩进的时候完全隐藏呢 效果图如下 找到目录src/style/sidebar.scss 然后搜索.hideSidebar可以搜出两个,不要慌,下面的时手机端的,我们拉到上面的.hideSidebar找到 .hideSidebar { .sidebar-container { width: 54px !important; } .main-container

  • JS运动框架之分享侧边栏动画实例

    本文实例讲述了JS运动框架之分享侧边栏动画实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <meta charset="utf-8">          <title></title>          <style type="text/css">         

  • 使用vue框架 Ajax获取数据列表并用BootStrap显示出来

    使用vue框架 Ajax获取数据列表并用BootStrap显示出来

    最近在搞毕业设计想趁机学学前端知识,于是就应用了目前比较流行的vue框架来进行数据显示,使用BootStrap进行简单的样式编写 1.第一步肯定是包的导入了 目前对node.js还不是很了解,所以包都是手动下载导入的,没有用到那个nmp vue.min.js是vue的主包,vue-resource.js是开源的vue Ajax包,对ajax进行了封装 bootstrap既就是样式的相关css和js了 <script type="text/javascript" src="

  • Vue框架中正确引入JS库的方法介绍

    本文主要给大家介绍的是关于在Vue框架中正确引入JS库的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: 错误示范 全局变量法 最不靠谱的方式就是将导入的库挂在全部变量window 对象下: // entry.js: window._ = require('lodash'); // MyComponent.vue: export default { created() { console.log(_.isEmpty() ? 'Lodash everywhere!' : 'U

  • 基于Vue框架vux组件库实现上拉刷新功能

    最近公司在研发app,选择了基于Vue框架的vux组件库,现总结在实现上拉刷新功能遇到的坑: 1.问题:只刷新一次,解决方法:需要自己手动重置状态 this.scrollerStatus.pullupStatus = 'default', 2.问题:不能滚动,解决方法:因为启用keep-alive缓存,需要设置 activated () { this.$refs.scroller.reset() } 如果还没效果,请在获取后台数据后,执行如下代码 this.$nxtTick(() => { th

  • 完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题

    mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条,因为它主要用途是设置类似于qq界面的那种格局,所以才无法滚动.那么如何解决这个问题呢? 解决方法: 一.在内容容器加上id,然后通过JS控制 <div class="mui-content mui-scroll-wrapper" id="scr1"> JS部分 <script> mui('#scr1').scroll(); </script> 二.利用创建子页面的方

  • 解决VUE框架 导致绑定事件的阻止冒泡失效问题

    前面遇到了一个问题就是VUE框架内部做了一些处理,使得在我们通过v-for渲染DOM的时候添加新元素的时候,绑定事件也能对新增的元素有效. 而这次遇到的问题则是,原本绑定事件中(该函数没有写在vue实例的methods中),导致阻止冒泡事件失效了.无论是return false 还是event.stopPropagation();都无效. 此时需要通过用VUE提供了事件修饰符来处理,比如阻止事件冒泡@click.stop='xx()' .stop .prevent .capture .self

  • Vue.js 点击按钮显示/隐藏内容的实例代码

    实例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <d

  • Vue 框架之动态绑定 css 样式实例分析

    今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=""就可以了,使用 Vue 呢之前也介绍过一个 v-bing:class="{{redClass:true}}" ,也可以实现绑定,但都不是动态绑定,动态绑定肯定是根据用户的某个操作实现动态的修改样式 先看下面的第一个小实例: 源代码 html 文件: 请看注释 <!DOCTYPE html>

随机推荐