element-ui封装---navmenu

傷城~ 2022-10-02 00:40 9阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

项目需要做一个管理后台，之前有用过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都会先关闭，然后展开，效果不是很好。找了很久，看到一个属性

![b84e1485e79b57b140719c1a4d75963ba04.jpg][]

我的做法是截取了路由的path，然后让第一层路由赋值，最终解决了问题，如果还有其他办法，恳请交流。

![ed7e6ea367ef47f5373e0815762636e7403.jpg][]

下面的是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>

转载于:https://my.oschina.net/u/3883810/blog/3060178

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/60ab6c9dc320491cbab1bddd449ad962.png
[b84e1485e79b57b140719c1a4d75963ba04.jpg]: /images/20220113/4b486c6592824e43a2bb13b262e15993.png
[ed7e6ea367ef47f5373e0815762636e7403.jpg]: /images/20220113/5635df1a9c654cbc909d74b050a3a3c8.png