Vue实现嵌套菜单组件

Calandra ·

更新时间:2024-09-20

· 544 次阅读

本案例为大家分享了Vue实现嵌套菜单组件的具体代码，供大家参考，具体内容如下

本文旨在使用Vue.js完成一个嵌套的菜单组件，使用mock.js对数据进行模拟，并且最小化复现功能

安装mock

cnpm i mockjs

//引入mockjs
import Mock from 'mockjs'
//使用mockjs模拟数据
Mock.mock('/menuData', 'get', {
    "ret": 0,
    "data": [{
            "id": 1,
            "name": "第一层",
            "children": [{
                    "name": "第二层"
                },
                {
                    "name": "第二层"
                },
                {
                    "name": "第二层"
                }
            ]
        },
        {
            "id": 2,
            "name": "第一层",
            "children": [{
                    "name": "第二层"
                },
                {
                    "id": 3,
                    "name": "第二层",
                    "children": [{
                            "name": "第三层"
                        },
                        {
                            "name": "第三层"
                        },
                        {
                            "name": "第三层"
                        }
                    ]
                },
                {
                    "id": 4,
                    "name": "第二层",
                    "children": [{
                            "name": "第三层"
                        },
                        {
                            "name": "第三层"
                        },
                        {
                            "id": 5,
                            "name": "第三层",
                            "children": [{
                                    "name": "第四层"
                                },
                                {
                                    "name": "第四层"
                                },
                                {
                                    "id": 6,
                                    "name": "第四层",
                                    "children": [{
                                            "name": "第五层"
                                        },
                                        {
                                            "name": "第五层"
                                        },
                                        {
                                            "name": "第五层"
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
});

菜单组件

<!--
 * @Author: byron
 * @Date: 2022-02-24 09:01:27
 * @LastEditTime: 2022-02-24 10:50:38
-->
<template>
    <div>
        <ul class="menu" v-for="item in data" :key="item.id">
            <li
                class="subMenu"
                @click="showhd(item)"
                :class="[item.children ? 'color' : '']"
            >
                <span> {{ item.name }} {{ item.id }}</span>
            </li>
            <div class="child" v-if="item.id == currentId && openFlag">
                <xxxx v-if="item.children" :data="item.children"></xxxx>
            </div>
        </ul>
    </div>
</template>
<script>
export default {
    name: 'xxxx',
    components: {},
    props: ['data'],
    data() {
        return {
            currentId: undefined,
            openFlag: false,
        }
    },
    methods: {
        showhd(a) {
            console.log(this.openFlag)
            this.openFlag = !this.openFlag
            this.currentId = a.id
            console.log(this.currentId)
            console.log(this.openFlag)
        },
    },
}
</script>
<style scoped>
li {
    text-decoration: none;
    /* list-style: none; */
}
.ul {
    overflow: hidden;
}
.head {
    display: none;
}
.show {
    display: block;
}
.color {
    color: brown;
}
</style>

使用菜单组件

<template>
    <div id="app">
        <h1>嵌套组件的实现</h1>
        <HelloWorld :data="menu" />
    </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import axios from 'axios'
export default {
    name: 'App',
    components: {
        HelloWorld,
    },
    data() {
        return {
            menu: [],
        }
    },
    async created() {
        const { data: r } = await axios.get('/menuData')
        this.menu = r.data
        console.log(this.menu)
    },
}
</script>
<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

VUE 菜单嵌套

1024 个赞