[vue3] 使用ElementPlus页面布局搭建架子

沫洺

已于 2022-11-19 21:41:07 修改

阅读量6.5k

点赞数 16

分类专栏： Vue3 文章标签：前端

于 2022-09-17 11:24:08 首次发布

本文链接：https://blog.csdn.net/HeyVIrBbox/article/details/126896677

版权

Vue3 专栏收录该内容

19 篇文章 22 订阅

订阅专栏

✨✨个人主页:沫洺的主页

📚📚系列专栏: 📖 JavaWeb专栏📖 JavaSE专栏 📖 Java基础专栏📖vue3专栏

📖MyBatis专栏📖Spring专栏📖SpringMVC专栏📖SpringBoot专栏

📖Docker专栏📖Reids专栏📖MQ专栏📖SpringCloud专栏

💖💖如果文章对你有所帮助请留下三连✨✨

💖前言

实现如下效果图需要结合vue3专栏从第一篇文章到此文章的准备工作

前期准备,在模拟接口中多写一些信息,单纯为了好看,可以忽略🙃

饿了么Plus:网址

Fast Mock:网址

💖效果图

💫先看效果图

🍂实现内容

🎫ElementPuls页面布局(本章)
🎫动态菜单显示(本章)
🎫实现菜单折叠效果(下一章)
🎫实现部分页面不使用整体框架(下一章)
🎫统一页面导航标签(下一章)

🍂ElementPuls页面布局

  <div class="common-layout">
    <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>
📍使用上图布局容器,复制代码到App.vue中,可将原来的代码注释

📍布局就是下图所示的布局,因为没有样式,所以大概就是所画的这个样子

📍接下来给Header设置Layout 布局和样式
  <el-row :gutter="20">
    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="16"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
  </el-row>
📍将代码加到Header位置,为了直观的看到效果,随便写一些内容

📍原理就是将页面竖着切成24份,4/16/4分为三部分

📍接下来添加样式,首先是背景颜色,内容居中,然后在第一部分,加个logo,第二部分写某某系统,第三部分整个下拉框
<style scoped>
  .el-row {
  align-items: center;
  vertical-align: middle;
  padding-top: 10px;
}
  .el-header {
  background-color: #545c64;
}
</style>
📍新建添加一个logo图片public/images/logo.png,在第一部分引入logo,并设置大小,可以去网上扒一个logo图片

📍改第一部分
<img src="/images/logo.png" class="logo" alt="管理系统" />
📍改第二部分

📍改第三部分

📍添加一个下拉菜单

📍代码我做了一些修改,可参考一下
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-icon><UserFilled /></el-icon>游客
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>菜单一</el-dropdown-item>
                  <el-dropdown-item>菜单二</el-dropdown-item>
                  <el-dropdown-item>菜单三</el-dropdown-item>
                  <el-dropdown-item divided>退出系统</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
.userinfo {
  text-align: right;
}

.el-dropdown-link {
  color: white;
}
📍到这里Header部分完事

📍接下来整Aside部分

🍂动态菜单显示

📍这里需要整一个Menu菜单

📍同样的代码我做了一些改动,可参考

          <el-menu default-active="1" class="el-menu-vertical-demo">
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                <span>一级菜单</span>
              </template>
              <el-menu-item index="1-1">二级菜单</el-menu-item>
              <el-menu-item index="1-2">二级菜单</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="2">
              <el-icon>
                <icon-menu />
              </el-icon>
              <span>普通菜单</span>
            </el-menu-item>
          </el-menu>

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

📍Aside部分添加的Menu菜单作为一个组件,可以抽成一个独立的vue页面,然后只需要在Aside中引用即可

📍新建components/Menu.vue

📍注意路径使用了别名@(前面文章提过)

📍然后给它加个背景颜色

📍接下来解决menu菜单代码写死的问题

📍准备工作,新建vues/order/Index.vue,List.vue,Add.vue

📍添加路由

📍 关联router

📍 开启router属性,默认开启首页路径对应,循环遍历

📍设置关联属性

import { createRouter, createWebHistory } from "vue-router";
const routes = [
    {
        path: '/home',
        name: 'home',
        component: () => import("@/views/Home.vue"),
        meta: { title: "首页" }
    },
    {
        path: '/poduct',
        name: 'poduct',
        component: () => import("@/views/poduct/Index.vue"),
        meta: { title: "商品管理" },
        children: [
            {
                path: '/poduct/list',
                name: 'poduct-list',
                component: () => import("@/views/poduct/List.vue"),
                meta: { title: "商品列表" }
            },
            {
                path: '/poduct/add',
                name: 'poduct-add',
                component: () => import("@/views/poduct/Add.vue"),
                meta: { title: "添加商品" }
            }
        ]
    },
    {
        path: '/editor',
        name: 'editor',
        component: () => import("@/views/Editor.vue"),
        meta: { title: "富文本" }
    },
    {
        path: '/order',
        name: 'order',
        component: () => import("@/views/order/Index.vue"),
        meta: { title: "订单管理" },
        children: [
            {
                path: '/order/list',
                name: 'order-list',
                component: () => import("@/views/order/List.vue"),
                meta: { title: "订单列表" }
            },
            {
                path: '/order/add',
                name: 'order-add',
                component: () => import("@/views/order/Add.vue"),
                meta: { title: "添加订单" }
            }
        ]
    },
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router

📍启用关联 :router="true"

📍 分情况进行遍历

📍 添加唯一标识

📍那么为什么要加唯一标识呢?

📍如果不加唯一标识,当你点击任意一个一级菜单,由于没有区别,就会默认将所有的一级菜单,当成一部分进行响应,有点牵一发而动全身的感觉,同理二级菜单也是,所有通过添加唯一标识就可以避免此问题,以为每一个菜单都设置了自己的path或者name属性,通过path和name就可以进行区分.

<template>
    <!-- default-active设置默认选择首页的路径,:router="true"开启关联 -->
    <el-menu default-active="/home" :router="true" class="el" active-text-color="#d23918" text-color="black">
        <!-- item代表菜单,index代表索引 -->
        <template v-for="(item1,index1) in $router.options.routes">
            <!-- 有二级节点-->
            <el-sub-menu v-if="item1.children?.length>0" :index="item1.name">
                <template #title>
                    <el-icon>
                        <location />
                    </el-icon>
                    <span>{{item1.meta.title}}</span>
                </template>

                <template v-for="(item2,index2) in item1.children">
                    <el-menu-item class="el" :index="item2.path">
                        <el-icon><List /></el-icon>
                        {{item2.meta.title}}
                    </el-menu-item>
                </template>
            </el-sub-menu>

            <!-- 只有一级节点 -->
            <el-menu-item v-if="item1.children==null" :index="item1.name">
                <el-icon>
                    <icon-menu />
                </el-icon>
                <span>{{item1.meta.title}}</span>
            </el-menu-item>
        </template>

    </el-menu>
</template>
<script setup lang="ts">
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
</script>
<style scoped>
.el {
    background-color: #b2b6b6;
}
</style>

📍添加图标