Vue前端左側(cè)菜單右側(cè)內(nèi)容的網(wǎng)站界面制作過程

更新時間：2025年02月27日 11:18:16 作者：灰憶T

這篇文章主要介紹了使用Vue和ElementUI制作一個帶有左側(cè)菜單和右側(cè)內(nèi)容區(qū)的網(wǎng)站頁面的過程,文中通過CSS樣式和深度作用符,實(shí)現(xiàn)了頁面的美化和功能的完善,需要的朋友可以參考下

前言

本項(xiàng)目由Vue+Element UI制作。

首先，看一下最終的效果：

這是一種常見的網(wǎng)站內(nèi)容排列風(fēng)格，

左側(cè)為菜單區(qū)域，可以選擇所需要的功能，

而右側(cè)大部分為內(nèi)容區(qū)域，頂部則放置一些重要、常用的功能和信息。

那么下面我們來完成這個頁面的制作流程。

制作流程

左側(cè)菜單

首先，我們完成左側(cè)的菜單，

菜單我們直接使用<el-aside>標(biāo)簽來完成：

    <!-- 左側(cè)菜單欄 -->
    <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">機(jī)密文章</el-menu-item>
        </el-submenu>

        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-setting left-menu-icon"></i>
            <span>設(shè)置</span>
          </template>
          <el-menu-item index="2-1">設(shè)置1</el-menu-item>
          <el-menu-item index="2-2">設(shè)置2</el-menu-item>
        </el-submenu>

      </el-menu>
    </el-aside>

    <!-- 右側(cè)內(nèi)容區(qū)域 -->

樣式：

/* 左側(cè)菜單欄中心區(qū)域 */
.menu-left {
  border:0px !important
}

/* 固定左側(cè)菜單欄樣式 */
.menu-container {
  position: fixed;
  padding-top: 4%;
  top: 0;
  left: 0;
  width: 12% !important;
  height: 100%; 
  background-color: #409EFF;
  color: #ffffff;
  z-index: 1000;
}

效果：

這樣，菜單的基本樣式就做好了，

其他不管，接下來去完成右側(cè)內(nèi)容區(qū)的展示，然后看一下整體效果。

右側(cè)內(nèi)容區(qū)

然后我們在右邊放入內(nèi)容的展示，

    <!-- 右側(cè)內(nèi)容區(qū)域 -->
    <el-main class="content-container">
      <div class="content-box">
        <h2>首頁</h2>
        <p v-for="i in 100" :key="i">這是首頁內(nèi)容區(qū)域的第 {{ i }} 行。</p>
      </div>
    </el-main>

樣式：

/* 右側(cè)內(nèi)容區(qū)域的外部容器 */
.content-container {
  margin-left: 12%;
  padding: 6px;
  background-color: #f5f5f5;
  border-left: 2px solid #ddd;
  position:relative;
  height: 100%;
  width: 100%;
}

/* 右側(cè)內(nèi)容區(qū)域的容器內(nèi)部 */
.content-box {
  width: 98% !important;
  background-color: #ffffff;
  border: 1px solid #ddd !important;
  padding: 8px !important;
}

效果：

此時可以看到右側(cè)區(qū)域可以正常進(jìn)行資源內(nèi)容的展示，

那么接下來，我們再完善一下，讓左右關(guān)聯(lián)起來，

點(diǎn)擊左側(cè)菜單能夠自由選擇展示的內(nèi)容。

點(diǎn)擊左側(cè)菜單展示右側(cè)內(nèi)容區(qū)

我們將菜單的選項(xiàng)換成<router-link>標(biāo)簽，

以路由跳轉(zhuǎn)的形式來完成這個功能，

現(xiàn)在我僅以“首頁”、“普通文章”、“會員文章”、“機(jī)密文章”幾個菜單做演示。

首先，創(chuàng)建四個vue子組件，來分別展示這幾個內(nèi)容，

分別為HomePage（首頁）、ArticleBasic（普通文章）、ArticleVip（會員文章）、ArticleSecret（機(jī)密文章），

比如ArticleBasic.vue的內(nèi)容為：

    <div>
        <h2>普通文章內(nèi)容</h2>
        <!-- 加長的內(nèi)容，用于測試滾動 -->
        <p v-for="i in 100" :key="i">這是會員文章內(nèi)容區(qū)域的第 {{ i }} 行。</p>
    </div>

其他幾個組件內(nèi)容相似，這里不列出。

然后，將幾個菜單項(xiàng)全部替換為<router-link>標(biāo)簽：

      <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">機(jī)密文章</router-link>
          </el-menu-item>
        </el-submenu>

        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>設(shè)置</span>
          </template>
          <el-menu-item index="2-1">設(shè)置1</el-menu-item>
          <el-menu-item index="2-2">設(shè)置2</el-menu-item>
        </el-submenu>

再把右側(cè)內(nèi)容區(qū)域替換為<router-view>以顯示子組件的內(nèi)容：

    <!-- 右側(cè)內(nèi)容區(qū)域 -->
    <el-main class="content-container">
      <div class="content-box">
        <router-view></router-view>
      </div>
    </el-main>

效果：

可以看到，現(xiàn)在點(diǎn)擊左側(cè)的選項(xiàng)可以進(jìn)行跳轉(zhuǎn)，

但是只能點(diǎn)擊文字才有效，且文字會變成紫色。

之所以這樣是因?yàn)橹苯邮褂昧藃outer-link標(biāo)簽包裹文字來進(jìn)行跳轉(zhuǎn)。

這樣體驗(yàn)不太好，也不美觀。

所以我們優(yōu)化一下：

首先，將<route-link>替換為@click點(diǎn)擊事件觸發(fā)的方式

統(tǒng)一使用handleMenuClick方法觸發(fā)點(diǎn)擊跳轉(zhuǎn)：

        <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')">
            機(jī)密文章
          </el-menu-item>
        </el-submenu>

添加點(diǎn)擊跳轉(zhuǎn)路由的方法：

    //處理菜單點(diǎn)擊事件（動態(tài)路由跳轉(zhuǎn)）
    handleMenuClick(path) {
      //路徑不同才跳，避免重復(fù)跳轉(zhuǎn)的問題
      if(this.$route.path !== path){
        this.$router.push(path); 
      }
    }

此時效果是這樣的：

現(xiàn)在文字不會變?yōu)殒溄有问搅?，而是變?yōu)檎５念伾怀鲲@示，

但此時還有一個問題，就是鼠標(biāo)移開后，菜單標(biāo)簽的深色背景會消失，

打開f12可以看到：

當(dāng)我們點(diǎn)擊選中菜單后，會為該選項(xiàng)自動生成一個 .is-active的樣式，

那么我們可以給它加一個樣式：

 /* 激活菜單項(xiàng)的背景顏色 */
.el-menu-item.is-active {
  background-color: #1E7FD0 !important;
}

此時再點(diǎn)擊菜單，效果便正常了，

當(dāng)前所選的菜單會持續(xù)保持選中狀態(tài)：

網(wǎng)站logo

現(xiàn)在我們再美化一下，讓左邊的菜單不那么單調(diào)。

可以在菜單的頂部加一個我們的Logo圖片。

我這邊用ps制作了一個簡單的logo小圖片，內(nèi)容是我的網(wǎng)名“灰憶”：

現(xiàn)在我們把左邊這個白字透明底的logo放上去,

logo圖片位置直接放在assets文件夾下,

在我們菜單標(biāo)簽里的第一個放置加上：

        <template slot="default">
          <div class="logo-icon-div">
            <img src="@/assets/灰憶-白字.png" alt="網(wǎng)站圖標(biāo)" class="logo-icon-img">
          </div>
        </template>

并且添加css樣式：

/* 左菜單logo圖標(biāo)的外部div */
.logo-icon-div {
  display: flex;
  justify-content: center;
  align-items: center;
    margin: 0 0 20px 0;
  position: relative;
}
/* 左菜單logo圖標(biāo)的img標(biāo)簽 */
.logo-icon-img {
  width: 80px;
  height: auto;
  position: relative;
}

現(xiàn)在效果是這樣：

看起來還是怪怪的，那么再美化一下，

可以在它的左右兩側(cè)各添加一根橫線，這樣就不會顯得太單調(diào)，

我們可以用偽元素來做到。

現(xiàn)在為菜單logo圖標(biāo)添加css樣式：

/* 左菜單logo圖標(biāo)左右的橫線效果 */
.logo-icon-div::before,
.logo-icon-div::after {
  content: '';
  display: block;
  width: 20%;
  height: 2px;
  background-color: #fff;
  position: absolute;
  top: 50%;
}
/* 左側(cè)橫線 */
.logo-icon-div::before {
  left: 0; 
  margin-right: 10px; 
}
 /* 右側(cè)橫線 */
.logo-icon-div::after {
  right: 0;
  margin-left: 10px; 
}

現(xiàn)在效果是這樣的：

接下來我們再豐富一下頁面，

通常網(wǎng)站需要展示當(dāng)前登錄賬號，

內(nèi)容區(qū)域的空間比較大，我們可以在內(nèi)容區(qū)域的頂部放入當(dāng)前賬號的顯示，以及一些常用功能，如搜索等。

頂部導(dǎo)航欄

現(xiàn)在我們將右側(cè)內(nèi)容區(qū)的頂部劃分一個頂部導(dǎo)航欄區(qū)域，其中有左右兩部分，

左側(cè)放搜索框，

右側(cè)放入常用功能、用戶名、注銷等組件。

頂部導(dǎo)航欄-左側(cè)區(qū)域

現(xiàn)在我們將左側(cè)區(qū)域定義一個簡單的搜索欄：

        <!-- 頂部導(dǎo)航欄 -->
        <el-menu mode="horizontal" class="header-nav">
          <!-- 頂部導(dǎo)航欄-左側(cè)區(qū)域 -->
          <div class="header-nav-left">
            <!-- 頂部導(dǎo)航欄-左側(cè)區(qū)域-搜索欄 -->
            <div class="search-wrapper">
              <el-input
                placeholder="請輸入搜索內(nèi)容"
                class="search-bar"
                v-model="searchQuery"
              ></el-input>
              <el-button class="search-button" @click="onSearch">搜 索</el-button>
            </div>
          </div>

          <!-- 頂部導(dǎo)航欄-右側(cè)區(qū)域 -->
        </el-menu>

樣式：

/* 頂部導(dǎo)航欄 */
.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;
}

/* 頂部導(dǎo)航欄-菜單選項(xiàng)樣式 */
.header-nav .el-menu-item{
  height: 48px;
  line-height: 48px;
}

/* 搜索欄樣式 */
.search-bar {
  width: 450px;
}

現(xiàn)在頂部左側(cè)有了一個簡單的搜索組件。

我們再來優(yōu)化一下這個組件，

將它的左右兩側(cè)變?yōu)榛⌒危⒎胖玫狡行牡奈恢?

那么，可以優(yōu)化一下css樣式：

搜索欄置于中心：

/* 頂部導(dǎo)航欄-左側(cè)區(qū)域 */
.header-nav-left {
  display: flex;
  align-items: center;
  position: relative;
  left: 25%;
}

/* 頂部導(dǎo)航欄-左側(cè)區(qū)域-搜索欄的容器 */
.search-wrapper {
  display: flex;
  align-items: center;
  position: relative;
}

搜索欄樣式優(yōu)化

現(xiàn)在，我們將搜索欄組件的左側(cè)和右側(cè)分別變?yōu)榛⌒危?/p>

通過修改border-radius屬性的方式來實(shí)現(xiàn)，

修改一下樣式：

/* 頂部導(dǎo)航欄-搜索欄 */
.search-bar {
  width: 450px;
  height: 35px; 
  border-radius: 20px 0 0 20px;
}

/* 頂部導(dǎo)航欄-搜索按鈕 */
.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; 
}

效果：

現(xiàn)在可以看到，搜索按鈕加了“border-radius: 0 20px 20px 0;”后，右側(cè)是變?yōu)榛⌒瘟耍?/p>

但是搜索框加了“ border-radius: 20px 0 0 20px;”左側(cè)卻未發(fā)生變化，沒有變?yōu)榛⌒危@是怎么回事？

我們從f12中查看一下：

原來，element ui的el-input自動生成了一個組件，

而它有一個額外的內(nèi)置樣式“.el-input__inner”，

它將我們的樣式“.search-bar”覆蓋掉了，

那么我們可以直接去修改這個樣式：

/* 搜索欄內(nèi)置樣式 */
.search-bar >>> .el-input__inner {
  height: 100%;
  border-radius: 20px 0 0 20px;
  border-right: none; 
}

效果：

現(xiàn)在，搜索欄組件的左側(cè)成功也變?yōu)榱嘶⌒危?/p>

那么為什么修改搜索欄內(nèi)置樣式的時候要加“>>>” 這個符號呢？

因?yàn)槲覀兪褂昧?code><style scoped>，這個scoped將該組件<style scoped></style>中的樣式限制了作用域，
讓這些樣式只影響當(dāng)前組件中的dom標(biāo)簽，
它的直接表現(xiàn)是，給組件的dom標(biāo)簽生成了類似于data-v-1234這種形式的唯一標(biāo)識，
<el-input>組件自動生成的<input>，卻沒有帶上這個data-v-1234，
導(dǎo)致我們的.search-bar .el-input__inner并不能影響到它，
而此時我們用“>>>”（深度作用符），就能突破scoped作用域限制來修改到它。

頂部導(dǎo)航欄-右側(cè)區(qū)域

現(xiàn)在來給搜索欄的右側(cè)加入一些內(nèi)容，比如放兩個常用功能的入口按鈕，

再放上當(dāng)前用戶的用戶名、以及注銷按鈕等。

          <!-- 頂部導(dǎo)航欄-右側(cè)區(qū)域 -->
          <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>

樣式：

/* 頂部導(dǎo)航欄的右側(cè)區(qū)域 */
.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;
}

效果：

現(xiàn)在，頂部導(dǎo)航欄的內(nèi)容也豐富了一些。

最終效果：

總結(jié)

到此這篇關(guān)于Vue前端左側(cè)菜單右側(cè)內(nèi)容的網(wǎng)站界面制作過程的文章就介紹到這了,更多相關(guān)Vue前端左側(cè)菜單右側(cè)內(nèi)容內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: