vue中element UI可折叠式导航菜单

最新推荐文章于 2024-07-08 17:31:14 发布

xumengxia—xu

最新推荐文章于 2024-07-08 17:31:14 发布

阅读量1.9k

点赞数 1

文章标签： vue html 前端 elementui

本文链接：https://blog.csdn.net/qq_56514785/article/details/118404670

版权

elementui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用Vue.js和Element UI库创建一个带有响应式侧边栏菜单的布局。菜单可以折叠和展开，包含多个导航项。点击按钮可以切换菜单的状态。整体布局包括头部、主要内容区域和底部footer。样式设置使得侧边栏和主要内容区域各有特色。

摘要由CSDN通过智能技术生成

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Document</title>

</head>
<body>

    <div id="app">
        <el-container class="main">
            <!-- 侧边栏 -->
        <el-aside :width="isCollapse ? '64px' : '200px'">
            <el-menu 
            background-color="#2f4050" 
            text-color="#cccccc"
            active-text-color="#fff"
            :collapse="isCollapse"
            :collapse-transition="false">

            <!-- 1 -->
            <el-submenu index="1">
                <template slot="title">
                  <i class="iconfont el-icon-menu"></i>
                  <span slot="title">导航一</span>
                </template>              
                  <el-menu-item class="menusmall" index="1-1">选项1</el-menu-item>
                  <el-menu-item class="menusmall" index="1-2">选项2</el-menu-item>
                </el-submenu>

                <!-- 导航2 -->
                <el-menu-item index="2">
                    <i class="iconfont el-icon-menu"></i>
                    <span slot="title">导航二</span>
                </el-menu-item>
                <el-menu-item index="3">
                    <i class="iconfont el-icon-menu"></i>
                    <span slot="title">导航三</span>
                </el-menu-item>
                <el-menu-item index="4">
                    <i class="iconfont el-icon-menu"></i>
                    <span slot="title">导航四</span>
                </el-menu-item>
                <el-menu-item index="5">
                    <i class="iconfont el-icon-menu"></i>
                    <span slot="title">导航五</span>
                </el-menu-item>        
            </el-menu>

        </el-aside>

        <!-- 内容 -->
        <el-container>
            <!-- nav -->
          <el-header>
              <!-- Header -->
              <el-row type="flex" justify="space-between" style="text-align: left;">
                  <!-- 左侧 -->
                  <el-col :span="12" ><el-button  @click="toggleCollapse">展开</el-button></el-col>
                  <!-- 右侧 -->
                  <el-col :span="12">1</el-col>
              </el-row>              
            </el-header>
            <!-- 主题区域 -->
          <el-main>
            <!-- Main -->
          </el-main>
          <el-footer>Footer</el-footer>
        </el-container>
    </el-container>
    </div>

</body>



</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="./lib/vue-router_3.0.2.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    // 创建路由对象
    new Vue({
      el: '#app',
      data: function() {
        return { 
          // 是否折叠
          isCollapse: false, }
      },

      methods: {
          // 点击按钮切换菜单的折叠与展开
          toggleCollapse() {
            this.isCollapse = !this.isCollapse
          },
      }
    })
  </script>

  <style scoped>
    #app {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }  

    .el-header {
      background-color: #fff;
      color: #333;
      text-align: center;
      line-height: 60px;
    }

  

  /* 侧边栏 */
    .el-aside {
        background-color: #2f4050;
        /* color: #fff; */
        /* text-align: center; */
        height:100vh;
        /* 撑满全屏 line-height: 100vh; */

    }

    .el-menu {
    border-right: none;
    }

    .menusmall {
       font-size: 12px;
        margin-left: 10px;

    }

    .iconfont {
   margin-right: 10px;
   }



    .el-main {
      background-color: #f3f3f4;
      color: #333;
      text-align: center;
      line-height: 160px;

    }

    .el-footer {
        height: 30px!important;
        background-color: #fff;

    }



  

  

  </style>

xumengxia—xu

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
vue中element UI可折叠式导航菜单

效果图：代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><linkrel="stylesheet"href="https://unpkg.com/element-ui/l...
复制链接

扫一扫

专栏目录