vue實現(xiàn)多級菜單效果

更新時間：2022年07月15日 10:03:36 作者：bugs_more_more

這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)多級菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)多級菜單效果的具體代碼，供大家參考，具體內(nèi)容如下

效果圖：

效果說明：

點擊父菜單，如果有子菜單就在其左側(cè)顯示出子菜單

思路：

通過遞歸的方式。

代碼：

子組件 MenuItem

// 子組件代碼
<template>
? ? <li>
? ? ? ? <span @click="toggle(model)"> {{ isFolder? "<" + model.menuName : model.menuName ? }}</span>
? ? ? ? <ul v-if="isFolder" v-show="open" style="position: absolute;left: -120px;top: 0px; width:100px; background-color: cadetblue;">
? ? ? ? ? ? <menuItems v-for="(item, index) in model.childTree" :model="item" :key="index"></menuItems>
? ? ? ? </ul>
? ? </li>
</template>
?
<script type="text/javascript">
? ? export default {
? ? ? ? // 組件遞歸必要條件，name屬性,然后在標(biāo)簽就可以通過name直接使用自己
? ? ? ? name: 'menuItems',
? ? ? ? props: ['model',],
? ? ? ? data() {
? ? ? ? ? ? return {
?? ??? ??? ??? ? // 控制子列表的顯示隱藏
?? ??? ??? ??? ?open: false
?? ??? ??? ?}
? ? ? ? },
? ? ? ? computed: {
? ? ? ? ? ? // 是否還有子列表需要渲染，作為v-if的判斷條件
? ? ? ? ? ? isFolder() {
? ? ? ? ? ? ? ? return this.model.childTree && this.model.childTree.length
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? // 切換列表顯示隱藏的方法
? ? ? ? ? ? toggle(mode) {
?? ??? ??? ??? ?
? ? ? ? ? ? ? ? if(this.isFolder) {
? ? ? ? ? ? ? ? ? ? this.open = !this.open
? ? ? ? ? ? ? ? }
?? ?/* ?? ??? ??? ?if(mode.id != undefined && this.open){
?? ??? ??? ??? ??? ?this.open = false;
?? ??? ??? ??? ?} */
? ? ? ? ? ? },
? ? ? ? }
? ? }
</script>
<style scoped>
?? ?ul,li {
?? ??? ?list-style: none;
?? ?}
</style>

父組件調(diào)用子組件

<template>
?? ?<!--http://m.fzitv.net/css/378895.html-->
?? ?<view>
?? ??? ?<div style="position: absolute;left:400px;">
?? ??? ??? ?<ul>
?? ??? ??? ??? ?<menu-item v-for="(model, index) in list" :model="model" :key="index"></menu-item>
?? ??? ??? ?</ul>
?? ??? ?</div>
?? ?</view>
?? ?
</template>
?
<script>
?? ?import MenuItem from "../../components/MenuItem.vue"
?? ?export default {
?? ??? ?components:{
?? ??? ??? ?MenuItem
?? ??? ?},
?? ??? ?computed:{
?? ??? ??? ?
?? ??? ?},
?? ??? ?data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?list: [ // 將菜單數(shù)據(jù)傳到菜單組件中就行了
?? ??? ??? ??? ?{
?? ??? ??? ??? ? ? ?"id": "1",
?? ??? ??? ??? ? ? ?"menuName": "菜單1",
?? ??? ??? ??? ? ? ?"childTree": [{
?? ??? ??? ??? ? ? ? ? ?"menuName": "項目進度",
?? ??? ??? ??? ? ? ? ? ?"childTree": [{
?? ??? ??? ??? ? ? ? ? ? ? ?"menuName": "項目一",
?? ??? ??? ??? ? ? ? ? ? ? ?"childTree": [{ "menuName": "詳細(xì)信息" }]
?? ??? ??? ??? ? ? ? ? ?}]
?? ??? ??? ??? ? ? ?}, {
?? ??? ??? ??? ? ? ? ? ?"menuName": "任務(wù)安排"
?? ??? ??? ??? ? ? ?}]
?? ??? ??? ??? ?},?
?? ??? ??? ??? ?{
?? ??? ??? ??? ? ? ?"id": "2",
?? ??? ??? ??? ? ? ?"menuName": "菜單2"
?? ??? ??? ??? ?},?
?? ??? ??? ??? ?{
?? ??? ??? ??? ? ? ?"id": "3",
?? ??? ??? ??? ? ? ?"menuName": "菜單3"
?? ??? ??? ??? ?}]
?? ??? ??? ?};
?? ??? ?},
?? ??? ?methods:{
?? ??? ?}
?? ?}
</script>
?
<style>?? ?
?? ?ul,li{
?? ?list-style: none !important;
? ? ?}
</style>

結(jié)語：

效果圖中是將子菜單顯示在父菜單的左側(cè)，也可以直接通過把下面的樣式刪除，讓子菜單顯示子父菜單的右側(cè)