【Vue前端】左侧菜单，右侧内容的网站界面

媒介

本项目由Vue+Element UI制作。
起首，看一下终极的结果：

这是一种常见的网站内容分列风格，
左侧为菜单区域，可以选择所需要的功能，
而右侧大部门为内容区域，顶部则放置一些重要、常用的功能和信息。
那么下面我们来完成这个页面的制作流程。
制作流程

左侧菜单

起首，我们完成左侧的菜单，
菜单我们直接使用<el-aside>标签来完成：

1.     <!-- 左侧菜单栏 -->
2.     <el-aside class="menu-container">
3.       <el-menu
4.         ref="menu-left"
5.         :default-openeds="['1','2']"
6.         class="menu-left"
7.         background-color="#409EFF"
8.         text-color="#ffffff"
9.         active-text-color="#ffd04b"
10.         @select="handleSelect"
11.         :default-active="activeIndex"
13.         @open="handleOpen"
14.         @close="handleClose"
15.       >
16.       
17.         <el-menu-item index="0">
18.           <i class="el-icon-menu left-menu-icon"></i>
19.           <router-link to="/HomePage">首页</router-link>
20.         </el-menu-item>
22.         <el-submenu index="1">
23.           <template slot="title">
24.             <i class="el-icon-document left-menu-icon"></i>
25.             <span>文章</span>
26.           </template>
27.           <el-menu-item index="1-1">
28.             <router-link to="/ArticleBasic">普通文章</router-link>
29.           </el-menu-item>
30.           <el-menu-item index="1-2">
31.             <router-link to="/ArticleVip">会员文章</router-link>
32.           </el-menu-item>
33.           <el-menu-item index="1-3">机密文章</el-menu-item>
34.         </el-submenu>
36.         <el-submenu index="2">
37.           <template slot="title">
38.             <i class="el-icon-setting left-menu-icon"></i>
39.             <span>设置</span>
40.           </template>
41.           <el-menu-item index="2-1">设置1</el-menu-item>
42.           <el-menu-item index="2-2">设置2</el-menu-item>
43.         </el-submenu>
45.       </el-menu>
46.     </el-aside>
48.     <!-- 右侧内容区域 -->

复制代码

样式：

1. /* 左侧菜单栏中心区域 */
2. .menu-left {
3.   border:0px !important
4. }
6. /* 固定左侧菜单栏样式 */
7. .menu-container {
8.   position: fixed;
9.   padding-top: 4%;
10.   top: 0;
11.   left: 0;
12.   width: 12% !important;
13.   height: 100%;
14.   background-color: #409EFF;
15.   color: #ffffff;
16.   z-index: 1000;
17. }

复制代码

结果：

如许，菜单的根本样式就做好了，
其他不管，接下来去完成右侧内容区的展示，然后看一下整体结果。
右侧内容区

然后我们在右边放入内容的展示，

1.     <!-- 右侧内容区域 -->
2.     <el-main class="content-container">
3.       <div class="content-box">
4.         <h2>首页</h2>
5.         <p v-for="i in 100" :key="i">这是首页内容区域的第 {{ i }} 行。</p>
6.       </div>
7.     </el-main>

复制代码

样式：

1. /* 右侧内容区域的外部容器 */
2. .content-container {
3.   margin-left: 12%;
4.   padding: 6px;
5.   background-color: #f5f5f5;
6.   border-left: 2px solid #ddd;
7.   position:relative;
8.   height: 100%;
9.   width: 100%;
10. }
12. /* 右侧内容区域的容器内部 */
13. .content-box {
14.   width: 98% !important;
15.   background-color: #ffffff;
16.   border: 1px solid #ddd !important;
17.   padding: 8px !important;
18. }

复制代码

结果：

此时可以看到右侧区域可以正常举行资源内容的展示，
那么接下来，我们再完善一下，让左右关联起来，
点击左侧菜单可以或许自由选择展示的内容。
点击左侧菜单展示右侧内容区

我们将菜单的选项换成<router-link>标签，
以路由跳转的情势来完成这个功能，
现在我仅以“首页”、“平常文章”、“会员文章”、“秘密文章”几个菜单做演示。
起首，创建四个vue子组件，来分别展示这几个内容，
分别为HomePage（首页）、ArticleBasic（平常文章）、ArticleVip（会员文章）、ArticleSecret（秘密文章），
比如ArticleBasic.vue的内容为：

1.     <div>
2.         <h2>普通文章内容</h2>
3.         <!-- 加长的内容，用于测试滚动 -->
4.         <p v-for="i in 100" :key="i">这是会员文章内容区域的第 {{ i }} 行。</p>
5.     </div>

复制代码

其他几个组件内容相似，这里不列出。
然后，将几个菜单项全部替换为<router-link>标签：

1.       <el-menu-item index="0">
2.           <i class="el-icon-menu"></i>
3.           <router-link to="/HomePage">首页</router-link>
4.         </el-menu-item>
5.         
6.       <el-submenu index="1">
7.           <template slot="title">
8.             <i class="el-icon-document"></i>
9.             <span>文章</span>
10.           </template>
11.           <el-menu-item index="1-1">
12.             <router-link to="/ArticleBasic">普通文章</router-link>
13.           </el-menu-item>
14.           <el-menu-item index="1-2">
15.             <router-link to="/ArticleVip">会员文章</router-link>
16.           </el-menu-item>
17.           <el-menu-item index="1-3">
18.             <router-link to="/ArticleSecret">机密文章</router-link>
19.           </el-menu-item>
20.         </el-submenu>
22.         <el-submenu index="2">
23.           <template slot="title">
24.             <i class="el-icon-setting"></i>
25.             <span>设置</span>
26.           </template>
27.           <el-menu-item index="2-1">设置1</el-menu-item>
28.           <el-menu-item index="2-2">设置2</el-menu-item>
29.         </el-submenu>

复制代码

再把右侧内容区域替换为<router-view>以表现子组件的内容：

1.     <!-- 右侧内容区域 -->
2.     <el-main class="content-container">
3.       <div class="content-box">
4.         <router-view></router-view>
5.       </div>
6.     </el-main>

复制代码

结果：

可以看到，现在点击左侧的选项可以举行跳转，
但是只能点击文字才有效，且文字会酿成紫色。
之以是如许是因为直接使用了router-link标签包裹文字来举行跳转。
如许体验不太好，也不美观。
以是我们优化一下：
起首，将<route-link>替换为@click点击事件触发的方式
统一使用handleMenuClick方法触发点击跳转：

1.         <el-menu-item index="0" @click="handleMenuClick('/HomePage')">
2.           <i class="el-icon-menu left-menu-icon"></i>
3.           首页
4.         </el-menu-item>
6.         <el-submenu index="1">
7.           <template slot="title">
8.             <i class="el-icon-document left-menu-icon"></i>
9.             <span>文章</span>
10.           </template>
11.           <el-menu-item index="1-1" @click="handleMenuClick('/ArticleBasic')">
12.             普通文章
13.           </el-menu-item>
14.           <el-menu-item index="1-2" @click="handleMenuClick('/ArticleVip')">
15.             会员文章
16.           </el-menu-item>
17.           <el-menu-item index="1-3" @click="handleMenuClick('/ArticleSecret')">
18.             机密文章
19.           </el-menu-item>
20.         </el-submenu>

复制代码

添加点击跳转路由的方法：

1.     //处理菜单点击事件（动态路由跳转）
2.     handleMenuClick(path) {
3.       //路径不同才跳，避免重复跳转的问题
4.       if(this.$route.path !== path){
5.         this.$router.push(path);
6.       }
7.     }

复制代码

此时结果是如许的：

现在文字不会变为链接情势了，而是变为正常的颜色突出表现，
但此时尚有一个问题，就是鼠标移开后，菜单标签的深色配景会消失，
打开f12可以看到：

当我们点击选中菜单后，会为该选项自动生成一个 .is-active的样式，
那么我们可以给它加一个样式：

1. /* 激活菜单项的背景颜色 */
2. .el-menu-item.is-active {
3.   background-color: #1E7FD0 !important;
4. }

复制代码

此时再点击菜单，结果便正常了，
当前所选的菜单会连续保持选中状态：

网站logo

现在我们再美化一下，让左边的菜单不那么单调。
可以在菜单的顶部加一个我们的Logo图片。
我这边用ps制作了一个简单的logo小图片，内容是我的网名“灰忆”：

现在我们把左边这个白字透明底的logo放上去,
logo图片位置直接放在assets文件夹下,
在我们菜单标签里的第一个放置加上：

1.         <template slot="default">
2.           <div class="logo-icon-div">
3.             <img src="@/assets/灰忆-白字.png" alt="网站图标" class="logo-icon-img">
4.           </div>
5.         </template>

复制代码

并且添加css样式：

1. /* 左菜单logo图标的外部div */
2. .logo-icon-div {
3.   display: flex;
4.   justify-content: center;
5.   align-items: center;
6.     margin: 0 0 20px 0;
7.   position: relative;
8. }
9. /* 左菜单logo图标的img标签 */
10. .logo-icon-img {
11.   width: 80px;
12.   height: auto;
13.   position: relative;
14. }

复制代码

现在结果是如许：

看起来照旧怪怪的，那么再美化一下，
可以在它的左右两侧各添加一根横线，如许就不会显得太单调，
我们可以用伪元素来做到。
现在为菜单logo图标添加css样式：

1. /* 左菜单logo图标左右的横线效果 */
2. .logo-icon-div::before,
3. .logo-icon-div::after {
4.   content: '';
5.   display: block;
6.   width: 20%;
7.   height: 2px;
8.   background-color: #fff;
9.   position: absolute;
10.   top: 50%;
11. }
12. /* 左侧横线 */
13. .logo-icon-div::before {
14.   left: 0;
15.   margin-right: 10px;
16. }
17. /* 右侧横线 */
18. .logo-icon-div::after {
19.   right: 0;
20.   margin-left: 10px;
21. }

复制代码

现在结果是如许的：

接下来我们再丰富一下页面，
通常网站需要展示当前登录账号，
内容区域的空间比较大，我们可以在内容区域的顶部放入当前账号的表现，以及一些常勤奋能，如搜索等。
顶部导航栏

现在我们将右侧内容区的顶部划分一个顶部导航栏区域，其中有左右两部门，
左侧放搜索框，
右侧放入常勤奋能、用户名、注销等组件。
顶部导航栏-左侧区域

现在我们将左侧区域界说一个简单的搜索栏：

1.         <!-- 顶部导航栏 -->
2.         <el-menu mode="horizontal" class="header-nav">
3.           <!-- 顶部导航栏-左侧区域 -->
4.           <div class="header-nav-left">
5.             <!-- 顶部导航栏-左侧区域-搜索栏 -->
6.             <div class="search-wrapper">
7.               <el-input
8.                 placeholder="请输入搜索内容"
9.                 class="search-bar"
10.                 v-model="searchQuery"
11.               ></el-input>
12.               <el-button class="search-button" @click="onSearch">搜 索</el-button>
13.             </div>
14.           </div>
16.           <!-- 顶部导航栏-右侧区域 -->
17.         </el-menu>

复制代码

样式：

1. /* 顶部导航栏 */
2. .header-nav {
3.   position: fixed;
4.   top: 0;
5.   left: 12%;
6.   width: 88%;
7.   border-bottom: 1px solid #ddd;
8.   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
9.   display: flex;
10.   align-items: center;
11.   padding: 0;
12.   z-index: 1000;
13.   height: 48px;
14. }
16. /* 顶部导航栏-菜单选项样式 */
17. .header-nav .el-menu-item{
18.   height: 48px;
19.   line-height: 48px;
20. }
22. /* 搜索栏样式 */
23. .search-bar {
24.   width: 450px;
25. }

复制代码

现在顶部左侧有了一个简单的搜索组件。
我们再来优化一下这个组件，
将它的左右两侧变为弧形，并放置到偏中心的位置,
那么，可以优化一下css样式：
搜索栏置于中心：

1. /* 顶部导航栏-左侧区域 */
2. .header-nav-left {
3.   display: flex;
4.   align-items: center;
5.   position: relative;
6.   left: 25%;
7. }
9. /* 顶部导航栏-左侧区域-搜索栏的容器 */
10. .search-wrapper {
11.   display: flex;
12.   align-items: center;
13.   position: relative;
14. }

复制代码

搜索栏样式优化

现在，我们将搜索栏组件的左侧和右侧分别变为弧形，
通过修改border-radius属性的方式来实现，
修改一下样式：

1. /* 顶部导航栏-搜索栏 */
2. .search-bar {
3.   width: 450px;
4.   height: 35px;
5.   border-radius: 20px 0 0 20px;
6. }
8. /* 顶部导航栏-搜索按钮 */
9. .search-button {
10.   height: 35px;
11.   line-height: 0;
12.   border-radius: 0 20px 20px 0;
14.   margin-left: -1px;
15.   background-color: #409eff;
16.   color: white;
17.   position: relative;
18.   font-size: 14px;
19.   font-weight: bold;
20.   border: none;
21. }

复制代码

结果：

现在可以看到，搜索按钮加了“border-radius: 0 20px 20px 0;”后，右侧是变为弧形了，
但是搜索框加了“ border-radius: 20px 0 0 20px;”左侧却未发生变化，没有变为弧形，这是怎么回事？
我们从f12中查看一下：

原来，element ui的el-input自动生成了一个组件，
而它有一个额外的内置样式“.el-input__inner”，
它将我们的样式“.search-bar”覆盖掉了，
那么我们可以直接去修改这个样式：

1. /* 搜索栏内置样式 */
2. .search-bar >>> .el-input__inner {
3.   height: 100%;
4.   border-radius: 20px 0 0 20px;
5.   border-right: none;
6. }

复制代码

结果：

现在，搜索栏组件的左侧成功也变为了弧形，
那么为什么修改搜索栏内置样式的时间要加“>>>” 这个符号呢？
   因为我们使用了<style scoped>，这个scoped将该组件<style scoped></style>中的样式限制了作用域，
让这些样式只影响当前组件中的dom标签，
它的直接表现是，给组件的dom标签生成了雷同于data-v-1234这种情势的唯一标识，
<el-input>组件自动生成的<input>，却没有带上这个data-v-1234，
导致我们的.search-bar .el-input__inner并不能影响到它，
而此时我们用“>>>”（深度作用符），就能突破scoped作用域限制来修改到它。
  顶部导航栏-右侧区域

现在来给搜索栏的右侧参加一些内容，比如放两个常勤奋能的入口按钮，
再放被骗前用户的用户名、以及注销按钮等。

1.           <!-- 顶部导航栏-右侧区域 -->
2.           <div class="header-nav-right">
3.             <el-menu-item index="1">会员中心</el-menu-item>
4.             <el-menu-item index="2">消息中心</el-menu-item>
5.             <span class="username">欢迎您，灰忆</span>
6.             <el-button type="danger" size="mini" class="logout-button" @click="logout">注销</el-button>
7.           </div>

复制代码

样式：

1. /* 顶部导航栏的右侧区域 */
2. .header-nav-right {
3.   display: flex;
4.   align-items: center;
5.   margin-left: auto;
6. }
8. /* 用户名 */
9. .username {
10.   font-size: 13px;
11.   margin-right: 15px;
12. }
14. /* 注销按钮 */
15. .logout-button {
16.   border-radius: 14px;
17.   color: white;
18.   padding: 5px 10px;
19.   margin-right: 10px;
20.   font-size: 14px;
21. }

复制代码

结果：

现在，顶部导航栏的内容也丰富了一些。
终极结果：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。