vue如何实现多级菜单效果

这篇文章主要介绍了vue如何实现多级菜单效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue如何实现多级菜单效果文章都会有所收获,下面我们一起来看看吧。效果图:效果说明:点击父菜单,如果

这篇文章主要介绍了vue如何实现多级菜单效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue如何实现多级菜单效果文章都会有所收获,下面我们一起来看看吧。

效果图:

vue如何实现多级菜单效果

效果说明:

点击父菜单,如果有子菜单就在其左侧显示出子菜单

思路:

通过递归的方式。

代码:

子组件 MenuItem

// 子组件代码
<template>
    <li>
        <span @click="toggle(model)"> {{ isFolder? "<" + model.menuName : model.menuName   }}</span>
        <ul v-if="isFolder" v-show="open" >
            <menuItems v-for="(item, index) in model.childTree" :model="item" :key="index"></menuItems>
        </ul>
    </li>
</template>
 
<script type="text/javascript">
    export default {
        // 组件递归必要条件,name属性,然后在标签就可以通过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>

父组件调用子组件

<template>
    <!--https://www.yisu.com/css/378895.html-->
    <view>
        <div >
            <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: [ // 将菜单数据传到菜单组件中就行了
                {
                    "id": "1",
                    "menuName": "菜单1",
                    "childTree": [{
                        "menuName": "项目进度",
                        "childTree": [{
                            "menuName": "项目一",
                            "childTree": [{ "menuName": "详细信息" }]
                        }]
                    }, {
                        "menuName": "任务安排"
                    }]
                }, 
                {
                    "id": "2",
                    "menuName": "菜单2"
                }, 
                {
                    "id": "3",
                    "menuName": "菜单3"
                }]
            };
        },
        methods:{
        }
    }
</script>
 
<style>    
    ul,li{
    list-style: none !important;
     }
</style>

结语:

效果图中是将子菜单显示在父菜单的左侧,也可以直接通过把下面的样式删除,让子菜单显示子父菜单的右侧

vue如何实现多级菜单效果

关于“vue如何实现多级菜单效果”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“vue如何实现多级菜单效果”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注恰卡网行业资讯频道。

本站部分文章来自网络或用户投稿,如无特殊说明或标注,均为本站原创发布。涉及资源下载的,本站旨在共享仅供大家学习与参考,如您想商用请获取官网版权,如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
后端

react中怎么应用SOLID原则

2022-7-16 9:08:52

后端

JavaScript内置对象BigInt实例分析

2022-7-16 9:08:56

搜索