Vue前端左侧菜单右侧内容的网站界面制作过程
前言
本项目由Vue+Element UI制作。
首先，看一下最终的效果：
这是一种常见的网站内容排列风格，
左侧为菜单区域，可以选择所需要的功能，
而右侧大部分为内容区域，顶部则放置一些重要、常用的功能和信息。
那么下面我们来完成这个页面的制作流程。
制作流程
左侧菜单
首先，我们完成左侧的菜单，
菜单我们直接使用<el-aside>标签来完成：
<!-- 左侧菜单栏 -->
<el-aside class="menu-container">
<el-menu
ref="menu-left"
:default-openeds="['1','2']"
class="menu-left"
background-color="#409EFF"
text-color="#ffffff"
active-text-color="#ffd04b"
@select="handleSelect"
:default-active="activeIndex"
@open="handleOpen"
@close="handleClose"
>
<el-menu-item index="0">
<i class="el-icon-menu left-menu-icon"></i>
<router-link to="/HomePage">首页</router-link>
</el-menu-item>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-document left-menu-icon"></i>
<span>文章</span>
</template>
<el-menu-item index="1-1">
<router-link to="/ArticleBasic">普通文章</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<router-link to="/ArticleVip">会员文章</router-link>
</el-menu-item>
<el-menu-item index="1-3">机密文章</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-setting left-menu-icon"></i>
<span>设置</span>
</template>
<el-menu-item index="2-1">设置1</el-menu-item>
<el-menu-item index="2-2">设置2</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<!-- 右侧内容区域 -->
样式：
/* 左侧菜单栏中心区域 */
.menu-left {
border:0px !important
}
/* 固定左侧菜单栏样式 */
.menu-container {
position: fixed;
padding-top: 4%;
top: 0;
left: 0;
width: 12% !important;
height: 100%;
background-color: #409EFF;
color: #ffffff;
z-index: 1000;
}
效果：
这样，菜单的基本样式就做好了，
其他不管，接下来去完成右侧内容区的展示，然后看一下整体效果。
右侧内容区
然后我们在右边放入内容的展示，
<!-- 右侧内容区域 -->
<el-main class="content-container">
<div class="content-box">
<h2>首页</h2>
<p v-for="i in 100" :key="i">这是首页内容区域的第 {{ i }} 行。</p>
</div>
</el-main>
样式：
/* 右侧内容区域的外部容器 */
.content-container {
margin-left: 12%;
padding: 6px;
background-color: #f5f5f5;
border-left: 2px solid #ddd;
position:relative;
height: 100%;
width: 100%;
}
/* 右侧内容区域的容器内部 */
.content-box {
width: 98% !important;
background-color: #ffffff;
border: 1px solid #ddd !important;
padding: 8px !important;
}
效果：
此时可以看到右侧区域可以正常进行资源内容的展示，
那么接下来，我们再完善一下，让左右关联起来，
点击左侧菜单能够自由选择展示的内容。
点击左侧菜单展示右侧内容区
我们将菜单的选项换成<router-link>标签，
以路由跳转的形式来完成这个功能，
现在我仅以“首页”、“普通文章”、“会员文章”、“机密文章”几个菜单做演示。
首先，创建四个vue子组件，来分别展示这几个内容，
分别为HomePage（首页）、ArticleBasic（普通文章）、ArticleVip（会员文章）、ArticleSecret（机密文章），
比如ArticleBasic.vue的内容为：
<div>
<h2>普通文章内容</h2>
<!-- 加长的内容，用于测试滚动 -->
<p v-for="i in 100" :key="i">这是会员文章内容区域的第 {{ i }} 行。</p>
</div>
其他几个组件内容相似，这里不列出。
然后，将几个菜单项全部替换为<router-link>标签：
<el-menu-item index="0">
<i class="el-icon-menu"></i>
<router-link to="/HomePage">首页</router-link>
</el-menu-item>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-document"></i>
<span>文章</span>
</template>
<el-menu-item index="1-1">
<router-link to="/ArticleBasic">普通文章</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<router-link to="/ArticleVip">会员文章</router-link>
</el-menu-item>
<el-menu-item index="1-3">
<router-link to="/ArticleSecret">机密文章</router-link>
</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-setting"></i>
<span>设置</span>
</template>
<el-menu-item index="2-1">设置1</el-menu-item>
<el-menu-item index="2-2">设置2</el-menu-item>
</el-submenu>
再把右侧内容区域替换为<router-view>以显示子组件的内容：
<!-- 右侧内容区域 -->
<el-main class="content-container">
<div class="content-box">
<router-view></router-view>
</div>
</el-main>
效果：
可以看到，现在点击左侧的选项可以进行跳转，
但是只能点击文字才有效，且文字会变成紫色。
之所以这样是因为直接使用了router-link标签包裹文字来进行跳转。
这样体验不太好，也不美观。
所以我们优化一下：
首先，将<route-link>替换为@click点击事件触发的方式
统一使用handleMenuClick方法触发点击跳转：
<el-menu-item index="0" @click="handleMenuClick('/HomePage')">
<i class="el-icon-menu left-menu-icon"></i>
首页
</el-menu-item>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-document left-menu-icon"></i>
<span>文章</span>
</template>
<el-menu-item index="1-1" @click="handleMenuClick('/ArticleBasic')">
普通文章
</el-menu-item>
<el-menu-item index="1-2" @click="handleMenuClick('/ArticleVip')">
会员文章
</el-menu-item>
<el-menu-item index="1-3" @click="handleMenuClick('/ArticleSecret')">
机密文章
</el-menu-item>
</el-submenu>
添加点击跳转路由的方法：
//处理菜单点击事件（动态路由跳转）
handleMenuClick(path) {
//路径不同才跳，避免重复跳转的问题
if(this.$route.path !== path){
this.$router.push(path);
}
}
此时效果是这样的：
现在文字不会变为链接形式了，而是变为正常的颜色突出显示，
但此时还有一个问题，就是鼠标移开后，菜单标签的深色背景会消失，
打开f12可以看到：
当我们点击选中菜单后，会为该选项自动生成一个 .is-active的样式，
那么我们可以给它加一个样式：
/* 激活菜单项的背景颜色 */
.el-menu-item.is-active {
background-color: #1E7FD0 !important;
}
此时再点击菜单，效果便正常了，
当前所选的菜单会持续保持选中状态：
网站logo
现在我们再美化一下，让左边的菜单不那么单调。
可以在菜单的顶部加一个我们的Logo图片。
我这边用ps制作了一个简单的logo小图片，内容是我的网名“灰忆”：
现在我们把左边这个白字透明底的logo放上去,
logo图片位置直接放在assets文件夹下,
在我们菜单标签里的第一个放置加上：
<template slot="default">
<div class="logo-icon-div">
<img src="@/assets/灰忆-白字.png" alt="网站图标" class="logo-icon-img">
</div>
</template>
并且添加css样式：
/* 左菜单logo图标的外部div */
.logo-icon-div {
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 20px 0;
position: relative;
}
/* 左菜单logo图标的img标签 */
.logo-icon-img {
width: 80px;
height: auto;
position: relative;
}
现在效果是这样：
看起来还是怪怪的，那么再美化一下，
可以在它的左右两侧各添加一根横线，这样就不会显得太单调，
我们可以用伪元素来做到。
现在为菜单logo图标添加css样式：
/* 左菜单logo图标左右的横线效果 */
.logo-icon-div::before,
.logo-icon-div::after {
content: '';
display: block;
width: 20%;
height: 2px;
background-color: #fff;
position: absolute;
top: 50%;
}
/* 左侧横线 */
.logo-icon-div::before {
left: 0;
margin-right: 10px;
}
/* 右侧横线 */
.logo-icon-div::after {
right: 0;
margin-left: 10px;
}
现在效果是这样的：
接下来我们再丰富一下页面，
通常网站需要展示当前登录账号，
内容区域的空间比较大，我们可以在内容区域的顶部放入当前账号的显示，以及一些常用功能，如搜索等。
顶部导航栏
现在我们将右侧内容区的顶部划分一个顶部导航栏区域，其中有左右两部分，
左侧放搜索框，
右侧放入常用功能、用户名、注销等组件。
顶部导航栏-左侧区域
现在我们将左侧区域定义一个简单的搜索栏：
<!-- 顶部导航栏 -->
<el-menu mode="horizontal" class="header-nav">
<!-- 顶部导航栏-左侧区域 -->
<div class="header-nav-left">
<!-- 顶部导航栏-左侧区域-搜索栏 -->
<div class="search-wrapper">
<el-input
placeholder="请输入搜索内容"
class="search-bar"
v-model="searchQuery"
></el-input>
<el-button class="search-button" @click="onSearch">搜 索</el-button>
</div>
</div>
<!-- 顶部导航栏-右侧区域 -->
</el-menu>
样式：
/* 顶部导航栏 */
.header-nav {
position: fixed;
top: 0;
left: 12%;
width: 88%;
border-bottom: 1px solid #ddd;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
padding: 0;
z-index: 1000;
height: 48px;
}
/* 顶部导航栏-菜单选项样式 */
.header-nav .el-menu-item{
height: 48px;
line-height: 48px;
}
/* 搜索栏样式 */
.search-bar {
width: 450px;
}
现在顶部左侧有了一个简单的搜索组件。
我们再来优化一下这个组件，
将它的左右两侧变为弧形，并放置到偏中心的位置,
那么，可以优化一下css样式：
搜索栏置于中心：
/* 顶部导航栏-左侧区域 */
.header-nav-left {
display: flex;
align-items: center;
position: relative;
left: 25%;
}
/* 顶部导航栏-左侧区域-搜索栏的容器 */
.search-wrapper {
display: flex;
align-items: center;
position: relative;
}
搜索栏样式优化
现在，我们将搜索栏组件的左侧和右侧分别变为弧形，
通过修改border-radius属性的方式来实现，
修改一下样式：
/* 顶部导航栏-搜索栏 */
.search-bar {
width: 450px;
height: 35px;
border-radius: 20px 0 0 20px;
}
/* 顶部导航栏-搜索按钮 */
.search-button {
height: 35px;
line-height: 0;
border-radius: 0 20px 20px 0;
margin-left: -1px;
background-color: #409eff;
color: white;
position: relative;
font-size: 14px;
font-weight: bold;
border: none;
}
效果：
现在可以看到，搜索按钮加了“border-radius: 0 20px 20px 0;”后，右侧是变为弧形了，
但是搜索框加了“ border-radius: 20px 0 0 20px;”左侧却未发生变化，没有变为弧形，这是怎么回事？
我们从f12中查看一下：
原来，element ui的el-input自动生成了一个组件，
而它有一个额外的内置样式“.el-input__inner”，
它将我们的样式“.search-bar”覆盖掉了，
那么我们可以直接去修改这个样式：
/* 搜索栏内置样式 */
.search-bar >>> .el-input__inner {
height: 100%;
border-radius: 20px 0 0 20px;
border-right: none;
}
效果：
现在，搜索栏组件的左侧成功也变为了弧形，
那么为什么修改搜索栏内置样式的时候要加“>>>” 这个符号呢？
因为我们使用了
<style scoped>，这个scoped将该组件<style scoped></style>中的样式限制了作用域，
让这些样式只影响当前组件中的dom标签，
它的直接表现是，给组件的dom标签生成了类似于data-v-1234这种形式的唯一标识，<el-input>组件自动生成的<input>，却没有带上这个data-v-1234，
导致我们的.search-bar .el-input__inner并不能影响到它，
而此时我们用“>>>”（深度作用符），就能突破scoped作用域限制来修改到它。
顶部导航栏-右侧区域
现在来给搜索栏的右侧加入一些内容，比如放两个常用功能的入口按钮，
再放上当前用户的用户名、以及注销按钮等。
<!-- 顶部导航栏-右侧区域 -->
<div class="header-nav-right">
<el-menu-item index="1">会员中心</el-menu-item>
<el-menu-item index="2">消息中心</el-menu-item>
<span class="username">欢迎您，灰忆</span>
<el-button type="danger" size="mini" class="logout-button" @click="logout">注销</el-button>
</div>
样式：
/* 顶部导航栏的右侧区域 */
.header-nav-right {
display: flex;
align-items: center;
margin-left: auto;
}
/* 用户名 */
.username {
font-size: 13px;
margin-right: 15px;
}
/* 注销按钮 */
.logout-button {
border-radius: 14px;
color: white;
padding: 5px 10px;
margin-right: 10px;
font-size: 14px;
}
效果：
现在，顶部导航栏的内容也丰富了一些。
最终效果：
总结
到此这篇关于Vue前端左侧菜单右侧内容的网站界面制作过程的文章就介绍到这了,更多相关Vue前端左侧菜单右侧内容内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在 Vue 3 中,使用组合式 API 时,可以通过内联事件处理器来直接在模板中编写事件处理逻辑,内联事件处理器不仅可以直接执行简单的操作,还可以调用组件中的方法,并访问事件参数,下面将详细讲解如何在内联事件处理器中调用方法以及访问事件参数,需要的朋友可以参考下2024-12-12
vue写的后台管理，需要将表格数据绘制成图表（折线图，柱状图），图表数据都是通过接口请求回来的。这篇文章主要介绍了vue+echarts 动态绘制图表及异步加载数据的相关知识,需要的朋友可以参考下2018-10-10
这篇文章主要为大家详细介绍了Vue自定义省市区三级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
本篇文章主要介绍了Vue header组件开发详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
今天小编就为大家分享一篇vue实现跳转接口push 转场动画示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
在现代 Web 开发中,字体文件通常是页面加载时间的重要因素之一,特别是在字体文件较大或网络环境不佳的情况下,用户体验可能会受到影响,本文将详细探讨如何在 Vue.js 项目中优化字体文件的加载和缓存,以提高页面性能,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了vue3封装el-pagination分页组件的完整代码,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-02-02
本次小编给大家带来的是关于用vue-cli脚手架创建vue项目步骤讲解内容，有需要的朋友们可以学习下。2019-02-02
这篇文章主要为大家介绍了Vue3组件异步更新和nextTick运行机制源码解读，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要为大家详细介绍了vue中非父子组件通信，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
最新评论