目录
未完善,有待改进
页面展示
创建文件
在src/layout包下,创建Aside、Header、Main文件夹和index.vue文件
引入layou/index.vue
在router包下index.vue 文件中引入layou/index.vue
import Home from '../layout/index.vue'
// 配置首页路由
{
path: '/home', // 添加register路由规则
name: 'home',
component: Home
},
添加按钮
在Login页面中,进行设置,进行验证后再跳转。
<el-form-item>
<!-- 按钮 -->
<!-- <el-button style="width: 100%;" type="primary" >登陆</el-button> -->
<el-button style="width: 100%;" type="primary" @click="handleLogin">登陆</el-button>
</el-form-item>
<script lang="ts" setup>
// 处理登录按钮点击事件
const handleLogin = () => {
if (loginForm.value.account === 'admin' && loginForm.value.password === 'admin') {
// 登录成功
router.push('/home');
} else {
console.log('账号或密码错误,请重新输入');
console.log('account:' + loginForm.value.account);
console.log('password:' + loginForm.value.password);
// 刷新页面
// window.location.reload();
}
};
</script>
layout/index.vue
主文件,在这里调用Aside、Header、Main.
<template>
<div class="common-layout">
<el-container class="zhongtiframe">
<el-aside class="aside" :style="{ height: height + 'px',minHeight: minHeight + 'px' }">
<Aside/>
</el-aside>
<el-container>
<el-header>
<Header/>
</el-header>
<el-main>
<Main/>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script setup>
// 导入左侧导航组件
import Aside from './Aside/index.vue'
import Header from './Header/index.vue'
import Main from './Main/index.vue'
import { ref,onMounted } from 'vue';
const height = ref(0)
const minHeight = ref(0)
onMounted(() => {
getHeight();
// 监听页面缩放事件
minHeight.value = document.documentElement.clientHeight;
window.addEventListener('resize',getHeight)
})
// 获取文档高度
function getHeight() {
height.value = document.documentElement.clientHeight ;
}
</script>
<style lang="scss" scoped>
// 设置Aside部分页面的颜色
.aside {
background-color: #9dc8fb;
}
.el-header {
--el-header-padding: 1 20px;
--el-header-height: 60px;
box-sizing: border-box;
flex-shrink: 0;
height: var(--el-header-height);
padding: var(--el-header-padding);
}
</style>
layout/Aside/index.vue
<template>
<div class="Aside_title">
海洋笔记
</div>
<el-radio-group v-model="isCollapse" >
<svg class="icon" v-if="isCollapse" @click="toggleCollapse" >
<use xlink:href="#icon-Shankar" />
</svg>
<svg class="icon" v-else @click="toggleCollapse" >
<use xlink:href="#icon-xiangzuo1" />
</svg>
</el-radio-group>
<hr class="horizontal-line">
<!-- default-active="2" 表示默认激活的是下拉菜单中的第三个菜单项,因为菜单项的索引是从 0 开始计数的。 -->
<el-menu
default-active="1"
class="el-menu-vertical-demo"
:collapse="isCollapse"
@open="handleOpen"
@close="handleClose"
>
<el-sub-menu index="1">
<template #title >
<!-- 设置自定义图标 -->
<svg class="icon1" >
<use xlink:href="#icon-biji" />
</svg>
<span class="icon-wenzi">笔记管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="1-1">笔记列表</el-menu-item>
<el-menu-item index="1-2">item two</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
<el-sub-menu index="2">
<template #title >
<!-- 设置自定义图标 -->
<svg class="icon1" >
<use xlink:href="#icon-shoucang" />
</svg>
<span class="icon-wenzi">我的收藏</span>
</template>
<el-menu-item-group>
<el-menu-item index="1-1">收藏夹1</el-menu-item>
<el-menu-item index="1-2">收藏夹2</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
<el-sub-menu index="3">
<template #title >
<!-- 设置自定义图标 -->
<svg class="icon1" >
<use xlink:href="#icon-fenxiang" />
</svg>
<span class="icon-wenzi">分享与协作</span>
</template>
<el-menu-item-group>
<el-menu-item index="1-1">分享管理</el-menu-item>
<el-menu-item index="1-2">协作管理</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
<el-sub-menu index="4">
<template #title >
<!-- 设置自定义图标 -->
<svg class="icon1" >
<use xlink:href="#icon-fenlei" />
</svg>
<span class="icon-wenzi">分类与标签管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="1-1">分类管理</el-menu-item>
<el-menu-item index="1-2">标签管理</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
<el-menu-item index="5">
<svg class="icon1" >
<use xlink:href="#icon-huishouzhan" />
</svg>
<template #title >
<!-- 设置自定义图标 -->
<span class="icon-wenzi">回收站</span>
</template>
</el-menu-item>
<el-menu-item index="6" disabled>
<svg class="icon1" >
<use xlink:href="#icon-daikaifa" />
</svg>
<template #title >
<!-- 设置自定义图标 -->
<span class="icon-wenzi">待开发</span>
</template>
</el-menu-item>
</el-menu>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
console.log(key, keyPath)
}
const toggleCollapse = () => {
isCollapse.value = !isCollapse.value
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 34vh;
min-height: 394px;
background-color: #9dc8fb;
}
.el-menu {
box-sizing: border-box;
list-style: none;
background-color: #9dc8fb;
border: 0; /**设置边框为0 */
position: relative;
}
.el-aside {
box-sizing: border-box;
flex-shrink: 0;
overflow: auto;
width: var(--el-aside-width,214px);
}
/* 设置海洋笔记 */
.Aside_title{
font-size: 40px;
height: 100px; /* 设置容器的高度 */
line-height: 100px; /* 设置行高等于容器高度 */
text-align: center; /* 水平居中 */
color: white;
}
/* 对展开和缩小图标进行设置 */
.icon{
height: 20px;
width: 20px;
fill: #ffffff; /* 设置图标颜色为白色 */
cursor: pointer; /* 当鼠标移动到图标上时显示小手样式 */
}
.icon1{
height: 20px;
width: 20px;
text-align: left;
/* margin-right: 10px; */
}
.icon-wenzi {
vertical-align: bottom;
margin-left: 10px;
}
/* 对横线的设置 */
.horizontal-line {
border-top: 1px solid rgb(240, 232, 232); /* 设置颜色和宽度 */
margin: 0 0; /* 设置上下边距 */
}
.el-sub-menu__title{
padding: 0px;
display: flex;
justify-content: center;
}
.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item, .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item-group__title, .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-sub-menu__title {
/* padding-left: calc(var(--el-menu-base-level-padding) + var(--el-menu-level)*var(--el-menu-level-padding)); */
white-space: nowrap;
/* text-align: left; */
float: left;
margin-left: 10px;
}
</style>
layout/Header/index.vue
<template>
<div class="header_container">
<!-- 面包屑 -->
<div class="header_left">
面包屑
</div>
<!-- 头像和用户名 -->
<div class="header_right">
<div class="header_avatar">
<el-avatar
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
/>
</div>
<!-- 用户名 -->
<div >
<!-- 下拉菜单 -->
<el-dropdown @command="handleCommand" class="header_headPortrait">
<span class="el-dropdown-link">
admin<el-icon class="el-icon--right"><arrow-down /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="a">个人信息</el-dropdown-item>
<el-dropdown-item command="b">退出</el-dropdown-item>
<el-dropdown-item command="c">Action 3</el-dropdown-item>
<el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>
<el-dropdown-item command="e" divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</div>
<hr/>
</template>
<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'
const handleCommand = (command: string | number | object) => {
ElMessage(`click on item ${command}`)
}
</script>
<style lang="scss" scoped>
.header_headPortrait{
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.example-showcase .el-dropdown-link {
cursor: pointer;
color: var(--el-color-primary);
display: flex;
align-items: center;
}
.header_container {
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
height: 100%;
.header_right {
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
.header_avatar {
cursor: pointer;
margin-right: 12px;
/* .avatar_img {
width: 30px;
height: 30px;
} */
}
.el-dropdown-link {
cursor: pointer;
display: flex;
align-items: center;
border: none;
outline: none;
}
}
}
</style>
layout/Main/index.vue
<template>
<el-tabs
type="card"
closable
class="demo-tabs"
>
<Hello/>
</el-tabs>
</template>
<script setup>
import Hello from '@/views/Home/index.vue'
</script>
<style lang="scss" scoped>
</style>
src/views/Home/index.vue
<template>
<div>
这是我的首页
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
</style>