0


【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;
}

效果:
blog.csdnimg.cn/direct/544401e97cdd4da49bc8a793846dc19c.png)
这样,菜单的基本样式就做好了,
其他不管,接下来去完成右侧内容区的展示,然后看一下整体效果。

右侧内容区

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

    <!-- 右侧内容区域 -->
    <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>

效果:
https://editor.csdn.net/
可以看到,现在点击左侧的选项可以进行跳转,
但是只能点击文字才有效,且文字会变成紫色。
之所以这样是因为直接使用了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;
}

效果:

在这里插入图片描述
现在,顶部导航栏的内容也丰富了一些。

最终效果:

在这里插入图片描述


本文转载自: https://blog.csdn.net/TZN00/article/details/142985818
版权归原作者 灰忆T 所有, 如有侵权,请联系我们删除。

“【Vue前端】左侧菜单,右侧内容的网站界面”的评论:

还没有评论