Vue结合element-ui实现导航菜单展开收缩小功能

这篇具有很好参考价值的文章主要介绍了Vue结合element-ui实现导航菜单展开收缩小功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 先上个效果图 

vue菜单拉伸收缩,vue,前端,elementui 

这里我把控制菜单收缩的放在中间了,是可以随便调整的。 

2. 问题思路想法 

① 首先是布局,这就是个很经典的后台管理系统的容器页面,这里分为上下结构,上面一般放些系统logo、 登录的用户信息,还有一些小功能等等。然后下面又分为左右结构,左边就是我们的导航菜单,右边那一块儿是我们将来所有的业务页面存放的地方

② 上下结构布局好说,下面左右结构我们采用display:flex布局,但是问题就是宽度该怎么去设置,我们要实现菜单的收缩功能,宽度都是动态的变化的,右边也要随着左边的变动而改变,结论就是,我们给左边设置宽度为 width: auto,然后右边不设置宽度,直接让右边宽度填满剩下的右侧,即给右侧div设置flex: 1,这样布局基本就可以了

③ 第三就是给el-menu 设置 class="el-menu-vertical" :collapse="isCollapse" 属性,一个是class类名,我们一会儿需要用到(就是展开的时候的宽度) ,还一个是isCollapse,表示开启折叠动画

3. 完整代码实现

<doc>
  容器页面
</doc>
<template>
  <div class="main">
    <div class="layout-top"></div>
    <div class="layout-bottom">
      <!-- 左侧 -->
      <div id="LayoutLeft" class="layout-left">
      <el-menu default-active="1" class="el-menu-vertical" :collapse="isCollapse">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">导航一</span>
          </template>
          <el-menu-item-group>
            <span slot="title">分组一</span>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <span slot="title">选项4</span>
            <el-menu-item index="1-4-1">选项1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">导航二</span>
        </el-menu-item>
      </el-menu>
        <!-- 控制菜单的收缩 -->
        <div @click="shrinkMenu" class="shrink">
          <i :class="isCollapse ? 'el-icon-s-unfold': 'el-icon-s-fold'"></i>
        </div>
      </div>
      <!-- 右侧 -->
      <div id="LayoutRight" class="layout-right">
        <div class="layout-content">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  computed: {
    isCollapse: {
      get() {
        return this.$store.state.common.isCollapse
      },
      set(val) {
        this.$store.commit('common/updateisCollapse', val)
      }
    }
  },
  methods: {
    shrinkMenu() {
      this.isCollapse = !this.isCollapse;
    }
  }
}
</script>
<style>
.main {
  width: 100vw;
  height: 100vh;
}
/* --- 上面部分 --- */
.layout-top {
  width: 100%;
  height: 60px;
  background: #b3c0d1;
}

/* ------ 下面部分 ------ */
.layout-bottom {
  width: 100%;
  height: calc(100% - 60px);
  /* flex布局 */
  display: flex;
}
.layout-left {
  /* 左侧不设置宽度 */
  width: auto;
  height: 100%;
  background: #d3dce6;
  position: relative;
}
.layout-right {
  height: 100%;
  /* flex关键代码,让右侧占满剩余宽度 */
  flex: 1;
  background: #e9eef3;
  padding: 25px;
  box-sizing: border-box;
}
/* 将来所有的业务页面容器 */
.layout-content {
  width: 100%;
  height: 100%;
  background: #fff;
}

/* el-menu相关样式 */
.el-menu {
  height: 100%;
  border-right-width: 0;
}
/* 必须设置 */
.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
}

/* 控制菜单收缩 */
.shrink {
  position: absolute;
  top: 50%;
  right: -25px;
  transform: translateY(-50%);
  width: 25px;
  height: 30px;
  border: 1px solid #b3c0d1;
  background: #b3c0d1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  cursor: pointer;
  z-index: 9999;
}
</style>

注意:这里我把 isCollapse 存在了Vuex中,然后就是比较简单的一些逻辑,大家稍微看下应该都能明白。

唯一的核心代码我觉得就是下面的左右两侧宽度设置的问题,左侧设置 width: auto,右侧不设置宽度,设置 flex: 1,这是核心的代码。另外还有个核心的是设置 el-menu 展开的宽度即:

.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
}

这个也是核心,要不然的话,展开收缩的时候会有问题。

 这篇就这样吧,也就一小小功能,嘿嘿~文章来源地址https://www.toymoban.com/news/detail-567268.html

到了这里,关于Vue结合element-ui实现导航菜单展开收缩小功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element-ui组件的使用,导航菜单(NavMenu)组件、分页组件的使用

    1、简介 :是\\\'饿了么\\\'公司推出的基于Vue2的组件库 2、使用方法:具体可见 官网 https://element.eleme.cn/#/zh-CN/component/installation ​ (1)在vue项目中安装:npm install element-ui ​ (2)在main.js文件中进行全局的配置 1、导航方向:通过mode属性设置 2、菜单项:  对应的js处理代码: 示

    2023年04月08日
    浏览(62)
  • Vue 中 element-ui table 结合后端请求实现排序

    一.需求 需要对指定列,结合后端请求进行排序 二.效果 三.知识点 3.1 如果需要结合后端请求排序,将需要排序的列上设置sortable为custom 3.2 同时在el-table标签上监听sort-change事件,在事件回调中可以获取当前排序列的字段名和排序顺序,从而将这些作为发起接口请求的入参 3

    2024年02月15日
    浏览(42)
  • vue结合element-ui实现(按钮控制)动态增加减少input框功能。

    一、template部分 二、script部分 三、效果展示 这是初始页面  这是点击添加 这是删除的     四、详细说明 v-for=\\\"(item,index)in array\\\" :key = \\\"index\\\" 这个是重点!!! ! 通俗点将,就是用一个div(盒子)将input输入框包括起来,然后在div中使用 v-for=\\\"(item,index)in array\\\" :key = \\\"ind

    2024年02月12日
    浏览(60)
  • 【element-ui组件】一.图像组件;二.导航菜单(NavMenu);三.上传组件:Upload;四.分页组件

    目录 一.图像组件 二.导航菜单(NavMenu) 1.导航方向:通过model属性来设置 2.菜单项: 三.上传组件:Upload 四.分页组件 1.实现分页的方式: (1)服务器端分页:通过底层的数据库来实现,前端会频繁的和服务器交互,客户端每次请求的是分页的数据而不是所有数据

    2023年04月24日
    浏览(50)
  • vue2实现可拖拽甘特图(结合element-ui的gantt图)

      接到公司需求,要做一个可拖拽的甘特图来实现排期需求,官方的插件要付费还没有中文的官方文档可以看,就去找了各种开源的demo来看,功能上都不是很齐全,于是总结了很多demo,合在一起组成了一版较为完整的满足需求的甘特图。 1.拖拽  拖拽功能是甘特图的主要功

    2024年02月03日
    浏览(50)
  • vue2+element-ui,el-aside侧边栏容器收缩与展开

    一、概览 实现效果如下: 二、项目环境 1、nodejs版本 2、npm版本 3、vue脚手架版本 三、创建vue项目 1、创建名为vuetest的项目 选择Default([Vue2] babel,eslint)    2、切换到项目目录,启动项目   3、使用浏览器预览  http://localhost:8080/ 四、使用Visual Studio Code打开项目 1、查看源码

    2023年04月22日
    浏览(39)
  • vue+element-ui Dropdown下拉菜单(获取某行数据)

    1、通过command方法直接传当前选中行的整个数据 html js 效果:

    2024年02月16日
    浏览(65)
  • element ui NavMenu 实现侧边栏导航菜单

      根据v-for遍历菜单参数,渲染导航栏。 使用Element UI 的 Container 布局容器和NavMenu导航菜单组件,使用router-view存放二级路由出口。 html: js: router/index.js:  配置路由  

    2024年02月08日
    浏览(39)
  • Vue 当页面进入全屏状态时element-ui的el-select下拉菜单不显示问题

    在前两天进行页面全屏时,一切都还好好的,可当使用element-ui中的el-select时,下拉菜单却怎么也显示不出来,但只要退出全屏状态,立马就好。 非全屏时:  全屏时: 开始我以为是层级问题,所以给el-select的下拉菜单加z-index,却发现加到多大都没用。 后来去官方文档里找

    2024年01月17日
    浏览(74)
  • 基于vue-cli创建后台管理系统前端页面——element-ui,axios,跨域配置,布局初步,导航栏

    1.vue-cli创建前端工程,安装element-ui,axios和配置; 2.前端跨域的配置,请求添加Jwt的设置; 3.进行初始化布局,引入新增页面的方式; 4.home页面导航栏的设置,一级目录,二级目录; 安装成功 布局初步 1.vue-cli创建前端工程,安装element-ui,axios和配置; 2.前端跨域的配置,请

    2024年02月09日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包