IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		图片批量下载器
↓批量下载图片,美女图库↓ 		图片自动播放器
↓图片自动播放器↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 后台管理系统——02首页布局 -> 正文阅读

[JavaScript知识库]后台管理系统——02首页布局

续上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里是一个管道符号，前面为你要过滤的值，后面是过滤器，所谓过滤就是你筛选后的值
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线（Vue中运用 AntVG6）
Vue事件处理的基本使用
Vue后台项目的记录 （一）
前后端分离vue跨域，devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-01-28 11:49:07  更:2022-01-28 11:49:52 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 13:40:09-

图片自动播放器
↓图片自动播放器↓ 		TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓ 		图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码