vue3+element?plus實(shí)現(xiàn)側(cè)邊欄過程
一般前端項(xiàng)目少不了側(cè)邊欄。
如圖所示
這些鬼東西特別繁瑣，所以我們喜歡找些現(xiàn)成、開源的所謂后臺(tái)管理的前端框架，開箱即用。
方便是方便，而且做得還挺好，問題是，有學(xué)習(xí)成本，要按照它的規(guī)則行事。一些功能是怎么實(shí)現(xiàn)的，不清楚，除非研究它的源代碼。
想改的話，更不容易。一切都靠猜、盲測(cè)，一則不好改，二則出了問題也不知道是哪里的毛病，反而欲速則不達(dá)。
所以我們之前基于一個(gè)空白的vue項(xiàng)目開發(fā)，把需要的路由、ajax封裝等摞上去?，F(xiàn)在是實(shí)現(xiàn)側(cè)邊欄菜單。點(diǎn)擊左側(cè)菜單項(xiàng)，對(duì)應(yīng)頁面展示在右側(cè)。
下面是詳細(xì)介紹，ui框架采用element plus。
1、如何編寫側(cè)邊欄結(jié)構(gòu)頁面
html代碼其實(shí)簡(jiǎn)單，左側(cè)菜單用<el-menu>，右側(cè)展示使用<router-view>。
后者不用做啥設(shè)置，點(diǎn)擊菜單項(xiàng)，結(jié)果自然就展示在右側(cè)了。好神奇。
以下是一個(gè)包含側(cè)邊欄的頁面示例。支持二級(jí)菜單。
三級(jí)或更多就不行了。
<template>
<el-container>
<el-aside width="255px"> <!-- 側(cè)邊欄寬255px -->
<!-- router是關(guān)鍵屬性 -->
<el-menu
router
:default-active="to"
active-text-color="#ffd04b"
background-color="#001529"
text-color="#999"
class="el-menu-vertical-demo sliderHeight"
>
<!-- 如果菜單項(xiàng)存在子孫節(jié)點(diǎn)，使用el-sub-menu -->
<el-sub-menu v-if="item.children" :index="item.route">
<template #title>
<el-icon><component :is="item.icon"></component></el-icon>{{ item.text }}
</template>
<el-menu-item
v-for="item2 in item.children"
:key="item2.name"
:index="item2.route"
>
<template #title>
<el-icon><component :is="item2.icon"></component></el-icon
>{{ item2.text }}
</template>
</el-menu-item>
</el-sub-menu>
<!-- 否則使用el-menu-item -->
<el-menu-item v-else :index="item.route">
<template #title>
<el-icon><component :is="item.icon"></component></el-icon>{{ item.text }}
</template>
</el-menu-item>
</el-menu>
</el-aside>
<el-main>
<!-- 結(jié)果展示在這里 -->
<router-view></router-view>
</el-main>
</el-container>
</template>
2、默認(rèn)選中菜單及加載對(duì)應(yīng)頁面
很自然地，打開包含側(cè)邊欄結(jié)構(gòu)的頁面，應(yīng)該有一個(gè)菜單項(xiàng)默認(rèn)被選中，同時(shí)加載對(duì)應(yīng)的頁面。
但是element plus只提供了選中指定菜單功能，加載頁面需要自己完成。
1）默認(rèn)選中指定的菜單項(xiàng)
設(shè)置屬性el-menu.default-active。
屬性值是el-sub-menu.index或el-menu-item.index
<el-menu
router
:default-active="to"
active-text-color="#ffd04b"
background-color="#001529"
text-color="#999"
class="el-menu-vertical-demo sliderHeight"
>
<el-menu-item :index="item.route">
2）加載對(duì)應(yīng)頁面
elment plus只能設(shè)置選中菜單項(xiàng)，加載相應(yīng)頁面需要自己動(dòng)手。
import { useRouter } from "vue-router";
const router = useRouter();
const gotoDefaultPage = (menus) => {
if (menus && menus.length > 0) {
const path = router.currentRoute.value.path;
//如果當(dāng)前路徑是子菜單，則直接打開子菜單；否則打開第一個(gè)子菜單
//頁面中，使用了菜單項(xiàng)的route作為index
const to = path.split("/").length > 2 ? path : menus[0].route;
router.replace(to);
}
};
onMounted(() => {
const menus = getMenus();
gotoDefaultPage(menus);
});
3、刷新頁面
好像刷新頁面，選中啥的會(huì)丟失，頁面一片空白？這個(gè)問題記得不是很清楚了，現(xiàn)在我沒有這個(gè)問題。
可能是獲取到當(dāng)前路由，按照路由重新打開。代碼見2。
const path = router.currentRoute.value.path;
//如果當(dāng)前路徑是子菜單，則直接打開子菜單；否則打開第一個(gè)子菜單
//頁面中，使用了菜單項(xiàng)的route作為index
const to = path.split("/").length > 2 ? path : menus[0].route;
router.replace(to);
4、icon
每個(gè)菜單項(xiàng)前面有個(gè)小圖標(biāo)。圖標(biāo)應(yīng)該在菜單項(xiàng)/路由表二合一的數(shù)據(jù)中定義。取值從elment plus的icon中選取。
- 數(shù)據(jù)結(jié)構(gòu)
{
path: "p3-1",
name: "p3-1",
component: () => import("../views/module3/page1"),
meta: {
text: "頁面A",
icon: "Histogram",
},
},
- 頁面
<el-menu-item :index="item.route">
<template #title>
<el-icon>
<!-- 關(guān)鍵的一句 -->
<component :is="item.icon"></component>
</el-icon>{{ item.text }}
</template>
</el-menu-item>
因?yàn)榭梢允褂萌我獾膃lement plus的icon，所以索性全局注冊(cè)
- src/main.js
import { createApp } from "vue";
import App from "./App.vue";
。。。
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import * as ElIcons from "@element-plus/icons-vue";
const app = createApp(App);
app.use(ElementPlus).mount("#app");
for (const name in ElIcons) {
app.component(name, ElIcons[name]);
}
5、新開窗口
在側(cè)邊欄結(jié)構(gòu)頁面中，如何打開一個(gè)新窗口呢？
其實(shí)，無論是在普通頁面，還是這種側(cè)邊欄結(jié)構(gòu)頁面，點(diǎn)擊一個(gè)鏈接或按鈕，打開一個(gè)新窗口，代碼都是一樣的。
但是！里面用到了路由。
如果該路由沒有注冊(cè)，那么在本文所示的側(cè)邊欄結(jié)構(gòu)頁面中，打開新窗口會(huì)失敗，頁面仍然顯示在右側(cè)，沒有新開窗口！
這一度讓我很困惑，以為<router-view>需要給個(gè)name，然而并沒有什么卵用。
按照本文所示的例子，側(cè)邊欄結(jié)構(gòu)頁面實(shí)際上有2個(gè)<router-view>。
一個(gè)是app.vue里設(shè)置了，然后側(cè)邊欄結(jié)構(gòu)頁面實(shí)際上是包含在外面這個(gè)<router-view>中，然后它自己也有一個(gè)<router-view>。
兩個(gè)都沒有命名，那么都叫“default”。可能系統(tǒng)采取了就近原則，在側(cè)邊欄結(jié)構(gòu)頁面中點(diǎn)擊新窗口鏈接，永遠(yuǎn)都對(duì)應(yīng)它本身這個(gè)<router-view>。
然而在定義路由項(xiàng)中，使用components，指定名稱，不好使，一點(diǎn)用沒有。后來我才發(fā)現(xiàn)，新開窗口的鏈接，或者說是路由，一定要注冊(cè)，這樣就能新開窗口了。
- 新開窗口的代碼：
<template>
<div @click="browseIt(1000)" class="show-detail">打開明細(xì)頁</div>
<div>
<router-link target="_blank" to="p2-1/detail/999"
>第一種新窗口打開頁面</router-link
>
</div>
</template>
<script>
import { reactive } from "vue";
import { useRouter } from "vue-router"; //引入useRouter
export default {
setup() {
const router = useRouter();
const browseIt = (id) => {
const to = router.resolve({
name: "p2-1-detail", //這里是跳轉(zhuǎn)頁面的name，要與路由設(shè)置保持一致
params: { id: id },
});
window.open(to.href, "_blank");
};
return {
browseIt,
};
},
};
</script>
- 路由
{
path: "p2-1/detail/:id",
name: "p2-1-detail",
component: () => import("../views/module2/page-1-detail.vue"),
meta: {
text: "頁面一明細(xì)",
noList: true,
},
},
6、無限級(jí)菜單
前面的例子，菜單級(jí)別只能去到二級(jí)。如果要實(shí)現(xiàn)無限級(jí)，需要使用遞歸。頁面組件遞歸。
代碼如下：
- 整體的側(cè)邊欄結(jié)構(gòu)頁面：
<template>
<el-container>
<el-aside width="255px">
<el-menu
router
:default-active="to"
active-text-color="#ffd04b"
background-color="#001529"
text-color="#999"
class="el-menu-vertical-demo sliderHeight"
>
<template v-for="item in menus" :key="item.name">
<!-- 自定義的菜單組件 -->
<middle-menu :item="item"></middle-menu>
</template>
</el-menu>
</el-aside>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</template>
<script>
import MiddleMenu from "./SidebarMenu.vue";
</script>
- 自定義的菜單組件
<template>
<el-sub-menu v-if="item.children" :index="item.route">
<template #title>
<el-icon><component :is="item.icon"></component></el-icon
>{{ item.text }}</template
>
<template v-for="innerItem in item.children" :key="innerItem.name">
<!-- 遞歸 -->
<middle-menu :item="innerItem"></middle-menu>
</template>
</el-sub-menu>
<el-menu-item v-else :index="item.route">
<template #title>
<el-icon><component :is="item.icon"></component></el-icon>{{ item.text }}
</template>
</el-menu-item>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
name: "middle-menu",
props: {
item: {
type: Object,
required: true,
},
},
});
</script>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue3繼承并擴(kuò)展三方組件完成二次封裝,文章使用naiveui的Input組件進(jìn)行舉例,elementPlus或者其他組件庫同理,并通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-03-03
關(guān)于Vue背景圖打包之后訪問路徑錯(cuò)誤問題的解決
本篇文章主要介紹了關(guān)于Vue背景圖打包之后訪問路徑錯(cuò)誤問題的解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
Vue使用el-tree 懶加載進(jìn)行增刪改查功能的實(shí)現(xiàn)
這篇文章主要介紹了Vue使用el-tree 懶加載進(jìn)行增刪改查,以懶加載的形式展示，目錄根據(jù)需求需要有新增 編輯 刪除 操作以及操作后的刷新樹結(jié)構(gòu)，具體實(shí)現(xiàn)代碼跟隨小編一起看看吧2021-08-08
vue Tooltip提示動(dòng)態(tài)換行問題
這篇文章主要介紹了vue Tooltip提示動(dòng)態(tài)換行問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue中bus的相關(guān)使用以及涉及到的問題與解決,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以跟隨小編一起了解一下2023-08-08
Element?el-tag標(biāo)簽圖文實(shí)例詳解
現(xiàn)在好多應(yīng)用場(chǎng)景里會(huì)有一些需要給文章打標(biāo)簽等類似的操作,下面這篇文章主要給大家介紹了關(guān)于Element?el-tag標(biāo)簽的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
這篇文章主要為大家介紹了DataV?全屏容器組件源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要為大家介紹了同步cookie插件原理及實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
vue.js或js實(shí)現(xiàn)中文A-Z排序的方法
下面小編就為大家分享一篇vue.js或js實(shí)現(xiàn)中文A-Z排序的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue3+vite動(dòng)態(tài)加載路由,本地路由和線上路由匹配方式
這篇文章主要介紹了vue3+vite動(dòng)態(tài)加載路由,本地路由和線上路由匹配方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06