vue+quasar使用遞歸實(shí)現(xiàn)動(dòng)態(tài)多級(jí)菜單

更新時(shí)間：2022年07月15日 11:04:17 作者：Incimo

這篇文章主要為大家詳細(xì)介紹了vue+quasar使用遞歸實(shí)現(xiàn)動(dòng)態(tài)多級(jí)菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue+quasar使用遞歸實(shí)現(xiàn)動(dòng)態(tài)多級(jí)菜單的具體代碼，供大家參考，具體內(nèi)容如下

效果圖：

菜單初始化入口 menu.vue，初始化側(cè)邊欄菜單組建，<my-q-menu/>才是遞歸開始

<template>
? <q-drawer
? ? v-model="is_hide_"
? ? show-if-above
? ? bordered
? ? content-class="bg-grey-2"
? ? :width="240"
? >
? <q-scroll-area class="fit">
? ? <!-- 遞歸實(shí)現(xiàn) 循環(huán)菜單 -->
? ? <my-q-menu/>
? </q-scroll-area>
? </q-drawer>
</template>

<script>
import MyQMenu from './myQMenu'
export default {
? name: 'myMenu',
? components: { MyQMenu },
? data () {
? ? return {
? ? ? leftDrawerOpen: true ??
? ? }
? },
? props: ['is_hide'],
? computed: {
? ? is_hide_: {
? ? ? get () { return this.is_hide }, ? ?// boolean 型，用于控制側(cè)邊菜單欄是否顯示
? ? ? set () {}
? ? }
? },
}
</script>

菜單遞歸入口 <my-q-menu/>，傳入menuList.json菜單配置信息

參數(shù)說明

@my-router 菜單配置信息
@init-level 初始化菜單縮進(jìn)大小

<template>
? <div>
? ? <!-- 動(dòng)態(tài)菜單 -->
? ? <q-list>
? ? ? <my-q-menu-item :my-router="menuList" :init-level="0"/>
? ? </q-list>
? </div>
</template>

<script>
import MyQMenuItem from './myQMenuItem'

export default {
? name: 'my-q-menu',
? components: { MyQMenuItem },
? data () {
? ? return {
? ? ? menuList: [
? ? ? ? {
? ? ? ? ? icon: 'inbox',
? ? ? ? ? label: '菜單1',
? ? ? ? ? children: [
? ? ? ? ? ? {
? ? ? ? ? ? ? icon: 'perm_identity',
? ? ? ? ? ? ? label: '菜單1-1',
? ? ? ? ? ? ? path: '/about'
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? icon: 'delete',
? ? ? ? ? ? ? label: '菜單1-2',
? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? icon: 'settings',
? ? ? ? ? ? ? ? ? label: '菜單2-1',
? ? ? ? ? ? ? ? ? path: '/noty'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ]
? ? ? ? ? ? }
? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? isItemLabel: true,
? ? ? ? ? Label_text: 'item-label '
? ? ? ? },
? ? ? ? {
? ? ? ? ? icon: 'feedback',
? ? ? ? ? label: '菜單數(shù)據(jù)結(jié)構(gòu)',
? ? ? ? ? path: '/test',
? ? ? ? ? hidden: false
? ? ? ? }
? ? ? ]
? ? }
? }
}
</script>

菜單元素遞歸執(zhí)行體 <my-q-menu-item/>

<!--
? ?動(dòng)態(tài)菜單 item 遞歸實(shí)現(xiàn)
? ?myRouter ： 菜單列表
? ?initLevel ： 菜單初始化縮進(jìn)等級(jí)
? ?author ： ths
-->
<template>
? <div>
??
? ? <div v-for="(item,index) in myRouter" :key="index">

?? ? ?<!-- 當(dāng)菜單item標(biāo)識(shí)為 ItemLabel 時(shí)，顯示Label_text，不渲染為菜單 -->
? ? ? <q-item-label v-if="item.isItemLabel" header class="text-weight-bold text-uppercase">
? ? ? ? {{item.Label_text}}
? ? ? </q-item-label>

? ? ? <!-- 先判斷當(dāng)前菜單是否需要顯示 -->
? ? ? <div v-if="!item.hidden && !item.isItemLabel">
? ? ??
? ? ? ? <!-- 當(dāng)沒有子菜單時(shí)，結(jié)束遞歸 -->
? ? ? ? <div v-if="!item.children">
? ? ? ? ? <q-expansion-item
? ? ? ? ? ? :header-inset-level="initLevel"
? ? ? ? ? ? expand-icon="1"
? ? ? ? ? ? :to="item.path"
? ? ? ? ? ? :icon="item.icon"
? ? ? ? ? ? :label="item.label"
? ? ? ? ? />
? ? ? ? </div>
? ? ? ??
? ? ? ? <!-- 子菜單依然存在時(shí)，繼續(xù)遞歸 -->
? ? ? ? <div v-else>
? ? ? ? ? <q-expansion-item
? ? ? ? ? ? expand-separator
? ? ? ? ? ? :header-inset-level="initLevel"
? ? ? ? ? ? :to="item.path"
? ? ? ? ? ? :icon="item.icon"
? ? ? ? ? ? :label="item.label"
? ? ? ? ? >
? ? ? ? ? ? <!-- 進(jìn)入下一次遞歸 -->
? ? ? ? ? ? <my-q-menu-item :my-router="item.children" :init-level="initLevel+0.3"/>
? ? ? ? ? </q-expansion-item>
? ? ? ? </div>
? ? ? </div>

? ? </div>
? </div>
</template>

<script>
export default {
? name: 'my-q-menu-item',
? data () {
? ? return {}
? },
? props: ['myRouter', 'initLevel']
}
</script>

菜單元素解釋

menuList: [
? ? ? ? {
? ? ? ? ? icon: 'inbox', ? ? ? ?//圖標(biāo)
? ? ? ? ? label: '菜單1',?? ??? ?//label
? ? ? ? ? children: [
? ? ? ? ? ? {
? ? ? ? ? ? ? icon: 'perm_identity', ??
? ? ? ? ? ? ? label: '菜單1-1',
? ? ? ? ? ? ? path: '/about' ? ? //路徑
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? icon: 'delete',
? ? ? ? ? ? ? label: '菜單1-2',
? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? icon: 'settings',
? ? ? ? ? ? ? ? ? label: '菜單2-1',
? ? ? ? ? ? ? ? ? path: '/noty'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ]
? ? ? ? ? ? }
? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? isItemLabel: true, ? ? ?//是否分隔欄
? ? ? ? ? Label_text: 'item-label ' ? //分隔欄label
? ? ? ? },
? ? ? ? {
? ? ? ? ? icon: 'feedback',
? ? ? ? ? label: '菜單數(shù)據(jù)結(jié)構(gòu)',
? ? ? ? ? path: '/test',
? ? ? ? ? hidden: false ? ? ? ? ? ?//是否隱藏
? ? ? ? }
? ? ? ]

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: