vue-admin-template 左上布局侧边栏改造指南

前端

2023-09-08 13:57:08

基于vue-admin-template模版改造左上布局侧边栏

在软件开发中，定制化开发是经常遇到的需求之一。本文将介绍如何基于vue-admin-template模版改造左上布局侧边栏，实现自定义布局。我们将会逐步介绍改造过程，并提供示例代码，帮助您轻松上手。

一、需求分析

首先，我们需要了解改造需求。假设我们要实现一个左侧固定宽度，右侧自适应宽度的布局。左侧宽度为200px，右侧宽度根据浏览器窗口宽度自动调整。

二、改造步骤

修改布局结构

首先，我们需要修改布局结构。在vue-admin-template模版中，默认的布局结构是顶部导航栏、左侧侧边栏和右侧内容区。我们需要将左侧侧边栏移动到顶部，并将其固定宽度。

添加CSS样式

接下来，我们需要添加CSS样式来实现布局。我们可以通过修改less变量来实现。在vue-admin-template模版中，我们可以找到less变量文件src/styles/element/index.less。

// 左侧侧边栏宽度
$layout-sider-width: 200px;

// 右侧内容区最小宽度
$layout-content-min-width: 1000px;

修改组件

最后，我们需要修改组件来实现布局。我们可以找到src/components/layout/index.vue文件，修改其中的代码。

<template>
  <div class="layout">
    <div class="top-bar">
      <el-menu class="el-menu-horizontal" mode="horizontal">
        <el-menu-item>菜单1</el-menu-item>
        <el-menu-item>菜单2</el-menu-item>
        <el-menu-item>菜单3</el-menu-item>
      </el-menu>
    </div>
    <div class="side-bar">
      <el-menu class="el-menu-vertical" mode="vertical">
        <el-menu-item>菜单1</el-menu-item>
        <el-menu-item>菜单2</el-menu-item>
        <el-menu-item>菜单3</el-menu-item>
      </el-menu>
    </div>
    <div class="content-area">
      <router-view></router-view>
    </div>
  </div>
</template>

<style scoped>
.layout {
  display: flex;
  height: 100%;
}

.top-bar {
  flex: 0 0 $layout-sider-width;
  background-color: #333;
  color: #fff;
}

.side-bar {
  flex: 0 0 $layout-sider-width;
  background-color: #eee;
}

.content-area {
  flex: 1;
  min-width: $layout-content-min-width;
  background-color: #fff;
}
</style>