使用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也未知