使用vue写一个侧边导航栏，利用vue的transition点击以动画的方式收放

效果图：

 

实现方式即是从vue的data中拿到数据后进行循环

 

大致流程图

 

 

 

HTML部分

html部分重点就是

@click.stop="secondary_menu_to(mc.m_c_route)"      点击事件并增加阻止事件冒泡
v-show="clickBtnVal == val.menu_id?true:false"            通过判断要显示哪一个子菜单

 

<div id="app">
            <aside>
                <ul>
                    <li v-for="val in menu"
                        :key="val.menu_id"
                        @click="showChildAside(val.menu_id)">
                        <div class="menu_name">
                            一级菜单{{val.menu_name}}
                        </div>
                        <ul>
                            <transition-group name="aside" tag="ul">
                                <li class="child_aside_li" 
                                v-for="mc,key in val.menu_child" 
                                :key="mc.m_c_route" 
                                @click.stop="secondary_menu_to(mc.m_c_route)"
                                v-show="clickBtnVal == val.menu_id?true:false">
                                二级菜单{{mc.m_c_name}}
                                </li>
                            </transition-group>
                        </ul>
                    </li>
                </ul>
            </aside>

            <main>main</main>

        </div>

vue部分

需要注意的部分：一个是data中用于循环的数据设计

另一个是点击判断的传过来的值是否为null或是已经处于打开的菜单的id值，即下面的 showChildAside(clickBtn)函数

 

<script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    menu: [{
                            menu_id: "A",
                            menu_name: "主页",
                            menu_child: [{
                                    m_c_route: "map11",
                                    m_c_name: "地图"
                                },
                                {
                                    m_c_route: "commiunity",
                                    m_c_name: "社区"
                                }
                            ]
                        },
                        {
                            menu_id: "B",
                            menu_name: "主页",
                            menu_child: [{
                                    m_c_route: "map2",
                                    m_c_name: "地图"
                                },
                                {
                                    m_c_route: "commiunity",
                                    m_c_name: "社区"
                                }
                            ]
                        },
                        {
                            menu_id: "C",
                            menu_name: "主页",
                            menu_child: [{
                                    m_c_route: "map3",
                                    m_c_name: "地图"
                                },
                                {
                                    m_c_route: "commiunity",
                                    m_c_name: "社区"
                                }
                            ]
                        },
                        {
                            menu_id: "D",
                            menu_name: "主页",
                            menu_child: [{
                                    m_c_route: "map4",
                                    m_c_name: "地图"
                                },
                                {
                                    m_c_route: "commiunity",
                                    m_c_name: "社区"
                                }
                            ]
                        }
                    ],
                    clickBtnVal: null
                },
                methods: {
                    showChildAside(clickBtn) {
                        // console.log("1  :  ", this.clickBtnVal)
                        // 这里的if用来判断再一次点击的选项有没有处于开启状态
                        if (this.clickBtnVal != clickBtn || this.clickBtnVal == null) {
                            this.clickBtnVal = clickBtn
                        } else {
                            this.clickBtnVal = null
                        }
                    },
                    secondary_menu_to(m_c_route) {
                        // 这里为点击子目录后要做的事，跳转页面等
                        console.log("跳转的路由", m_c_route)
                    }
                },
            })
        </script>

 

css部分

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        #app {
            display: grid;
            grid-template-columns: 160px 1fr;
        }

        /* 父级菜单显示菜单名的class */
        .menu_name {
            height: 40px;
            line-height: 40px;
            background-color: #00FFFF;
            border-bottom: 2px #FFFFFF solid;
            cursor: pointer;
            padding-left: 15px;
        }

        /* 子级菜单显示菜单明的class */
        .child_aside_li {
            line-height: 60px;
            background-color: #3197C3;
            margin-left: 30px;
            overflow: hidden;
            color: white;
            padding-left: 10px;
            cursor: pointer;
        }

        aside {
            width: 160px;
            overflow: hidden;
            height: 100vh;
            background-color: aliceblue;
        }

        .aside-enter,
        .aside-leave-to {
            opacity: 0;
            height: 0;
        }

        .aside-enter-to,
        .aside-leave {
            opacity: 1;
            height: 60px;
        }

        .aside-enter-active,
        .aside-leave-active {
            transition: all 0.5s ease;
        }
    </style>

 

存在的问题：v-for与v-show一起连用不知道会不会有生么影响，性能的消耗也未知。还存不存在什么bug也未知