后台管理系统——02首页布局

续上01layout.vue<template><div class="home"><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-main&g

Nanchen_42

6530人浏览 · 2022-01-24 13:34:10

Nanchen_42 · 2022-01-24 13:34:10 发布

续上01，接下来实现layout.vue的基本布局

layout.vue

<template>
  <div class="home">
    <el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'layout',
}
</script>
<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
    
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
    position: absolute;
    top: 60px;
    bottom: 0;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
    position: absolute;
    top: 60px;
    left: 200px;
    right: 0;
    bottom: 0;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>

效果：

测试一下是否可以分开滚动

制作header的导航栏

这里用到了bootstrap4中的mr-auto

<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="flex mr-auto ">
          <h2 class="tit">WEB ADMIN</h2>
          <i class="el-icon-s-fold" @click="menucollapse"></i>
        </div>
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="1">处理中心</el-menu-item>
          <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项1</el-menu-item>
              <el-menu-item index="2-4-2">选项2</el-menu-item>
              <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="3" disabled>消息中心</el-menu-item>
          <el-menu-item index="4"
            ><a href="https://www.ele.me" target="_blank"
              >订单管理</a
            ></el-menu-item
          >
        </el-menu>
      </el-header>
  </div>
</template>

<script>
export default {
  name: "layout",
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style>
.el-header {
  background-color: #545c64;
  color: #333;
  text-align: center;
  line-height: 60px;
  display: flex;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  /*     position: absolute;
    top: 60px;
    bottom: 0; */
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  /* padding: 0 20px; */
  text-align: center;
  /*     position: absolute;
    top: 60px;
    left: 200px;
    right: 0;
    bottom: 0; */
}
.flex {
  display: flex;
  align-items: center;
  color: #fff;
  cursor: pointer;
}
</style>

添加图片：

          <el-submenu index="2">
            <template slot="title">
              <el-avatar
                size="small"
                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
              ></el-avatar>
              admin
            </template>
            <el-menu-item index="2-1">设置</el-menu-item>
            <el-menu-item index="2-2">退出</el-menu-item>
          </el-submenu>

把数据结构中的数据放入对应的位置上

数据结构：

 navBar: {
        active: "0",
        list: [
          {
            name: "首页",
            subActive: "0",
            submenu: [
              {
                icon: "el-icon-s-home",
                name: "后台首页",
                pathname: "index",
              },
              {
                icon: "el-icon-s-claim",
                name: "商品列表",
                pathname: "shop_goods_list",
              },
            ],
          },
          {
            name: "商品",
            subActive: "0",
            submenu: [
              {
                icon: "el-icon-s-claim",
                name: "商品列表",
                pathname: "shop_goods_list",
              },
            ],
          },
          {
            name: "订单",
          },
          {
            name: "会员",
          },
          {
            name: "设置",
          },
        ],
      },

遍历数据结构，取出中间的name

<el-menu-item index="1" v-for="(item, index) in navBar.list" :key="index">{{item.name}}</el-menu-item>

 <el-menu
          :default-active="navBar.active"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >

完整布局代码：

<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="flex mr-auto">
          <h2 class="tit">WEB ADMIN</h2>
          <!-- 这里设置一个点击事件用来切换侧边栏的效果 -->
          <i class="el-icon-s-operation" @click="menucollapse"></i>
        </div>
        <el-menu
          :default-active="navBar.active"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item
            :index="index | numToString"
            v-for="(item, index) in navBar.list"
            :key="index"
            >{{ item.name }}</el-menu-item
          >
          <el-submenu index="100">
            <template slot="title">
              <el-avatar
                size="small"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              ></el-avatar>
              admin
            </template>
            <el-menu-item index="2-1">设置</el-menu-item>
            <el-menu-item index="2-2">退出</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-header>
      <el-container style="height: 100%">
        <!-- 获取他的动态高度，如果开启了collapse收起，那么就缩小成64px，展开就放大200px -->
        <!-- :width="collapse ? '64px' : '200px'" style="height: 100%" -->
        <el-aside width="auto">
          <!-- default-active:gg当前激活菜单的 index -->
          <el-menu
            :default-active="slideMenuActive"
            :collapse="collapse"
            class="el-menu-vertical-demo"
            active-text-color="#008080"
            @select="submenuSelect"
          >
            <el-menu-item
              :index="i | numToString"
              v-for="(item2, i) in submenus"
              :key="i"
            >
              <i :class="item2.icon"></i>
              <span slot="title">{{ item2.name }}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <p v-for="j in 100" :key="j">{{ j }}</p>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// 混入
import common from "@/common/mixins/common.js";
export default {
  name: "layout",
  mixins: [common],
  data() {
    return {
      collapse: false,
      navBar: {
        active: "0",
        list: [
          {
            name: "首页",
            subActive: "0",
            submenu: [
              {
                icon: "el-icon-s-home",
                name: "后台首页",
                pathname: "index",
              },
              {
                icon: "el-icon-s-claim",
                name: "商品列表",
                pathname: "shop_goods_list",
              },
            ],
          },
          {
            name: "商品",
            subActive: "0",
            submenu: [
              {
                icon: "el-icon-s-claim",
                name: "商品列表",
                pathname: "shop_goods_list",
              },
            ],
          },
          {
            name: "订单",
          },
          {
            name: "会员",
          },
          {
            name: "设置",
          },
        ],
      },
    };
  },
  methods: {
    // 点击图标进行切换
    menucollapse() {
      this.collapse = !this.collapse;
    },
    // 头部索引切换
    handleSelect(key, keyPath) {
      // 把获取到的索引给到active进行绑定
      this.navBar.active = key;
      console.log(this.navBar.active);
      this.slideMenuActive = "0";
      console.log(this.slideMenuActive);
    },
    // 侧边栏导航切换
    submenuSelect(key, keyPath) {
      console.log(key, keyPath);
      this.slideMenuActive = key;
    },
  },
  computed: {
    submenus() {
      // 每次点击的list列表项 例如点击首页：
      // [ { "icon": "el-icon-s-claim", "name": "商品列表", "pathname": "shop_goods_list" } ]
      return this.navBar.list[this.navBar.active].submenu || [];
    },
    slideMenuActive: {
      get() {
        return this.navBar.list[this.navBar.active].subActive || "0";
      },
      set(val) {
        this.navBar.list[this.navBar.active].subActive = val;
      },
    },
  },
};
</script>
<style>
.home{
  height: 100%;
}
.el-container{
  height: 100%;
  overflow: hidden;
}
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
.el-header {
  background-color: #545c64;
  color: #333;
  text-align: center;
  line-height: 60px;
  display: flex;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;

  /*   position: absolute;
  top: 60px;
  bottom: 0; */
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  padding: 0 20px;
  text-align: center;
  /*   position: absolute;
  top: 60px;
  left: 200px;
  right: 0;
  bottom: 0; */
}
.flex {
  display: flex;
  align-items: center;
  color: #fff;
  cursor: pointer;
}
.tit {
  font-size: 24px;
  line-height: 60px;
  margin-right: 40px;
}
.el-menu{
  height: 100%;
}
</style>

效果：

注意事项：

参数	说明	类型	可选值	默认值
collapse	是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）	boolean	—	false

事件名称	说明	回调参数
select	菜单激活回调	index: 选中菜单项的 index, indexPath: 选中菜单项的 index path

| 在vue里是一个管道符号，前面为你要过滤的值，后面是过滤器，所谓过滤就是你筛选后的值

欢迎使用若依开源

快速构建 Web 应用程序

更多推荐

深入 Composer autoload

这几天看到 phphub 上面有人开始进坑怒看 laravel 源代码，于是我也凑个热闹来看下这个故事。众所周知 composer 是现代PHP 项目的基石，与古老的 pear 不同， composer 并不是一款专注于系统级别php 管理的包管理系统，而是基于项目的一个库管理系统。这就好比 npminstall -g 和 npminstall 的区别。而且最主要

RuoYi 若依

实体类（VO，DO，DTO）的划分

经常会接触到VO，DO，DTO的概念，本文从领域建模中的实体划分和项目中的实际应用情况两个角度，对这几个概念进行简析。得出的主要结论是：在项目应用中，VO对应于页面上需要显示的数据（表单），DO对应于数据库中存储的数据（数据表），DTO对应于除二者之外需要进行传递的数据。一、实体类百度百科中对于实体类的定义如下：实体类的主要职责是存储和管理系统内部的信息，它也可以有行为，甚至很复杂的行为，但这些行

RuoYi 若依

计算机课如何断开学生端,极域课堂管理系统怎么连接老师学生端连接问题解决方法...

现在的大学课堂都紧跟着时代的步伐，选择用电子教室代替传统的教室，电子教室的好处就是可以让坐在角落的同学也能清楚的看到老师的每一个操作，除此之外还可以电子举手，提交作业获得老师的及时反馈，学习效率倍增。如果你发现自己的电脑出现连接不上电脑的情况的，来看看小编是怎么解决的把！类别：教育管理大小：16.38M 语言：简体中文评分：61、首先，正常的学生机器是开机就会自动的连接老师端的，如果...