Vue前端左側(cè)菜單右側(cè)內(nèi)容的網(wǎng)站界面制作過程
前言
本項(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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue內(nèi)聯(lián)處理器中訪問方法和訪問事件參數(shù)詳解
在 Vue 3 中,使用組合式 API 時,可以通過內(nèi)聯(lián)事件處理器來直接在模板中編寫事件處理邏輯,內(nèi)聯(lián)事件處理器不僅可以直接執(zhí)行簡單的操作,還可以調(diào)用組件中的方法,并訪問事件參數(shù),下面將詳細(xì)講解如何在內(nèi)聯(lián)事件處理器中調(diào)用方法以及訪問事件參數(shù),需要的朋友可以參考下2024-12-12
vue+echarts實(shí)現(xiàn)動態(tài)繪制圖表及異步加載數(shù)據(jù)的方法
vue寫的后臺管理，需要將表格數(shù)據(jù)繪制成圖表（折線圖，柱狀圖），圖表數(shù)據(jù)都是通過接口請求回來的。這篇文章主要介紹了vue+echarts 動態(tài)繪制圖表及異步加載數(shù)據(jù)的相關(guān)知識,需要的朋友可以參考下2018-10-10
這篇文章主要為大家詳細(xì)介紹了Vue自定義省市區(qū)三級聯(lián)動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
本篇文章主要介紹了Vue header組件開發(fā)詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
vue實(shí)現(xiàn)跳轉(zhuǎn)接口push 轉(zhuǎn)場動畫示例
今天小編就為大家分享一篇vue實(shí)現(xiàn)跳轉(zhuǎn)接口push 轉(zhuǎn)場動畫示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
在Vue項(xiàng)目中優(yōu)化字體文件的加載和緩存的常用方法
在現(xiàn)代 Web 開發(fā)中,字體文件通常是頁面加載時間的重要因素之一,特別是在字體文件較大或網(wǎng)絡(luò)環(huán)境不佳的情況下,用戶體驗(yàn)可能會受到影響,本文將詳細(xì)探討如何在 Vue.js 項(xiàng)目中優(yōu)化字體文件的加載和緩存,以提高頁面性能,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue3封裝el-pagination分頁組件的完整代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-02-02
圖文講解用vue-cli腳手架創(chuàng)建vue項(xiàng)目步驟
本次小編給大家?guī)淼氖顷P(guān)于用vue-cli腳手架創(chuàng)建vue項(xiàng)目步驟講解內(nèi)容，有需要的朋友們可以學(xué)習(xí)下。2019-02-02
Vue3組件異步更新和nextTick運(yùn)行機(jī)制源碼解讀
這篇文章主要為大家介紹了Vue3組件異步更新和nextTick運(yùn)行機(jī)制源碼解讀，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要為大家詳細(xì)介紹了vue中非父子組件通信，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02