element-ui封裝---navmenu

 

項目須要作一個管理後臺，以前有用過ele，以爲不錯，因此此次項目選型，仍是用了element-ui

項目架構element-ui  vue  vuex  vue-router  axios還有個富文本wangEditor（後來纔看到有個vue-admin?），架構都差很少。後來想一想仍是本身封裝了看看，也借鑑了好多大佬的封裝。

首先第一塊，navMenu

<template>
    <div id="navbar">
        <el-menu :default-active="currentRoute"
                 :default-openeds="opens"
                 class="el-menu-vertical-demo"
                 router
                 @open="handleOpen"
                 @close="handleClose"
                 :collapse="isCollapse">
            <!-- 有子菜單 -->
            <template v-for="(first,f_index) in navData">
                <el-submenu :index="first.index"
                            :key="`menu0_${f_index}`"
                            v-if="first.second.length>0">
                    <template slot="title"
                              v-if="first.title">
                        <i :class="first.icon"></i>
                        <span slot="title">{{first.title}}</span>
                    </template>
                    <el-menu-item-group v-for="(second,s_index) in first.second"
                                        :key="s_index">

                        <span slot="title"
                              v-if="second.title">{{second.title}}</span>
                        <el-menu-item :index="second_child.index"
                                      v-for="(second_child,second_c_index) in second.child"
                                      :key="second_c_index">{{second_child.content}}</el-menu-item>
                    </el-menu-item-group>
                    <div v-for="(second,s_index) in first.second"
                         :key="s_index+'a'">
                        <el-submenu :index="third.index"
                                    v-for="(third,th_index) in second.third"
                                    :key="th_index">
                            <span slot="title">{{third.title}}</span>
                            <el-menu-item :index="third_child.index"
                                          v-for="(third_child,third_c_index) in third.child"
                                          :key="third_c_index">{{third_child.content}}</el-menu-item>
                        </el-submenu>
                    </div>
                </el-submenu>
                <!-- 沒有子菜單 -->
                <el-menu-item :index="first.index"
                              :key="`menu0_${f_index}`"
                              v-if="first.second.length==0">
                    <i class="el-icon-menu"></i>
                    <span slot="title">{{first.title}}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </div>
</template>
<script>
export default {
    data() {
        return {
            isCollapse: false,
            currentRoute: "",
            opens: [],
            navData: [
                {
                    index: "/article",
                    title: "內容",
                    icon: "el-icon-location",
                    second: [
                        {
                            title: "這裏全是知識庫相關",
                            child: [
                                {
                                    index: "/article/list",
                                    content: "知識文章"
                                },
                                {
                                    index: "/article/sort",
                                    content: "分類管理"
                                },
                                {
                                    index: "/article/organize",
                                    content: "機構管理"
                                },
                                {
                                    index: "/article/comment",
                                    content: "評論管理"
                                },
                                {
                                    index: "/article/report",
                                    content: "舉報管理"
                                }
                            ]
                        }
                        // {
                        //     third: [
                        //         {
                        //             title: "舉報相關",
                        //             index: "",
                        //             child: [
                        //                 {
                        //                     index: "",
                        //                     content: "已舉報"
                        //                 },
                        //                 {
                        //                     index: "",
                        //                     content: "已舉報"
                        //                 }
                        //             ]
                        //         }
                        //     ]
                        // }
                    ]
                },
                {
                    index: "/hospital",
                    title: "醫院醫生",
                    icon: "el-icon-menu",
                    second: [
                        {
                            title: "醫院醫生相關信息",
                            child: [
                                {
                                    index: "/hospital/hospitalList",
                                    content: "醫院庫"
                                },
                                {
                                    index: "/hospital/doctorList",
                                    content: "醫生庫"
                                },
                                {
                                    index: "/hospital/doctorTeamList",
                                    content: "團隊醫生"
                                },
                                {
                                    index: "/hospital/doctorApply",
                                    content: "申請入住"
                                }
                            ]
                        }
                    ]
                },

                // {
                //     index: "3",
                //     title: "醫生問答",
                //     icon: "el-icon-menu",
                //     second: []
                // },
                // {
                //     index: "4",
                //     title: "申請入住",
                //     icon: "el-icon-menu",
                //     second: []
                // },
                // {
                //     index: "5",
                //     title: "患者列表",
                //     icon: "el-icon-menu",
                //     second: []
                // },
                {
                    index: "/community",
                    title: "社區管理",
                    icon: "el-icon-menu",
                    second: [
                        {
                            child: [
                                {
                                    index: "/community/circleList",
                                    content: "圈子列表"
                                },
                                {
                                    index: "/community/invitationList",
                                    content: "帖子列表"
                                },
                                {
                                    index: "/community/commentList",
                                    content: "評論列表"
                                },
                                {
                                    index: "/community/report",
                                    content: "舉報管理"
                                }
                            ]
                        }
                    ]
                },
                // {
                //     index: "7",
                //     title: "評論審批",
                //     icon: "el-icon-menu",
                //     second: []
                // },
                {
                    index: "8",
                    title: "活動設置",
                    icon: "el-icon-menu",
                    second: [
                        {
                            child: [
                                {
                                    index: "/activity/banner",
                                    content: "banner設置"
                                }
                            ]
                        }
                    ]
                },
                {
                    index: "/shop",
                    title: "商品管理",
                    icon: "el-icon-menu",
                    second: [
                        {
                            child: [
                                {
                                    index: "/shop/list",
                                    content: "商品列表"
                                }
                            ]
                        }
                    ]
                },
                {
                    index: "10",
                    title: "訂單信息",
                    icon: "el-icon-menu",
                    second: [
                        {
                            child: [
                                {
                                    index: "/order/list",
                                    content: "訂單列表"
                                }
                            ]
                        }
                    ]
                }
            ]
        };
    },
    created() {
        this.currentRoute = this.$route.path;
        this.opens = [];
        this.opens[0] = this.currentRoute.substring(
            this.currentRoute.indexOf("/"),
            this.currentRoute.lastIndexOf("/")
        );
        console.log(this.opens);
    },
    mounted() {},
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    }
};
</script>

<style lang="less" scoped>
#navbar {
    width: 200px;
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        min-height: 100vh;
        overflow-y: scroll;
    }
}
</style>

一開始都是本身寫的，也沒看官方的佈局，因此建議仍是就用官方的左右佈局，我試了一下，還挺好的。畢竟語義化纔是H5的意義。

這裏這裏出現了個小問題，就是每當跳轉的時候，menu默認關閉，而後再展開。也就是每跳轉一個router的時候，menu都會先關閉，而後展開，效果不是很好。找了好久，看到一個屬性

個人作法是截取了路由的path，而後讓第一層路由賦值，最終解決了問題，若是還有其餘辦法，懇請交流。

下面的是layout佈局

<template>
    <div class="layout">
        <div class="main-wrapper">
            <div class="main-left">
                <Navbar></Navbar>
            </div>
            <div class="main-right">
                <div class="main-right-wrapper">
                    <div class="main-right-title">{{pageTitle}}</div>
                    <slot>
                        <router-view />
                    </slot>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Navbar from "../components/navbar";
// import "element-ui/lib/theme-chalk/display.css";

export default {
    name: "layout",
    components: {
        Navbar
    },
    data() {
        return {
            isCollapse: false,
            docWidth: document.body.clientWidth,
            pageTitle: ""
        };
    },
    computed: {},
    mounted() {
        this.pageTitle = document.title;
    }
};
</script>

<style lang="less">
.layout {
    width: 100vw;
    height: 100vh;
    .main-wrapper {
        display: flex;
        > div {
            &:last-of-type {
                flex-grow: 1;
            }
        }
    }
    .main-right-title {
        background: #fff;
        font-weight: bold;
        padding: 20px;
    }
    .main-right-wrapper {
        height: 100vh;
        padding: 20px;
        background: #f2f2f2;
        overflow: scroll;
        > div {
            background: #fff;
            padding: 20px;
        }
    }
}
</style>

頁面調用以下：

<template>
    <layout>
        <div id=''>
        </div>
    </layout>
</template>

<script>
export default {
    components: {},
    props: {},
    data() {
        return {};
    },
    mounted() {},
    methods: {}
};
</script>
<style lang="less" scoped>
</style>