vue封装左侧导航栏组件demo

示例demo的样式：

然后说一下布局组件的调用逻辑

App-->layout-->sidebar-->sid_menu-->menu_item 

这里我使用覆盖element的样式的方式，达到项目需求，这里学到了很多如何定位dom元素的样式，使用css阴影，如何覆盖样式，如何使用css3的伪类，如何通过鼠标移动事件找到dom元素等

首先使用layout组件并设置样式，其作为左侧组件的容器，在项目中layout用来加载整个页面的布局，这里做的demo只做了左侧布局。

layout代码如下：

<template>
    <div class="layout">
          <side-bar />
    </div>
</template>
<script>
import sideBar from "./sidbar"
export default {
    name : 'layout-demo',
    components:{
        sideBar,
    }
}
</script>
<style lang="scss" scoped>
.layout{
    display: flex;
    width: 100%;
    height: 100%;
}
</style>

这里使用的是用prop传入参数的方式，递归遍历json数据展示菜单栏的方法，在sidebar 中使用阴影，这里列出阴影参数

h-shadow	v-shadow	blur	spread	color	inset
水平阴影	垂直阴影	模糊	尺寸	颜色	内外

sidebar代码如下

<template>
<div class="left">
    <side-menu :munu_data ='menudata' @menuClick="onMenuClick" />
</div>

    
</template>
<script>
import sideMenu from "./side_menu"
export default {
    name:"side-bar",
    components:{
        sideMenu
    },
    data() {
        return {
              menudata:[
                {
                    name:"111",
                    id:1,
                    
                },
                  {
                    name:"222",
                    id:2,
                },
                {
                    name:"333",
                    id:3,
                    children:[
                        {
                            name:'333_1',
                            id:31
                        },
                        {
                            name:'333_2',
                            id:32,
                            children:[
                                {
                                    name:"2322222",
                                    id:4,
                                }
                            ]
                        }
                    ] 
                },
            ]
        }
    },
    methods:{
        onMenuClick(name) {
            console.log(name)
        },
    }

}
</script>

<style lang="scss" scoped>
.left{
    width: 350px;
    height: 100%;
    z-index: 100;
    display: flex;
    background-color:honeydew;
    box-shadow: 5px 0 8px -4px #000;
    }


</style>

 sidemenu中主要是使用了element的样式，调整菜单栏的位置

<template>
    <div>
        <el-menu default-active="isCollaps" @menuClick="getselect" class="menumain">
             <nav-menu :navMenus="leftMenus"></nav-menu>
        </el-menu>
    </div>
</template>
<script>
import NavMenu from "./menu_item"
export default {
    name:'side-menu',
    components:{
        NavMenu,
    },
    data() {
        return {
                leftMenus:this.munu_data,
            }
        },
    props:{
        munu_data:{
            type:Array,
            required:true
        }
    },
    methods:{
        getselect(key){
            console.log(key)
        }
    },
    mounted(){
        console.log(this.leftMenus)
    }
   
}
</script>
<style lang="scss" scoped>
.menumain{
    padding-top:100px;

    align-items: center;
    width: 350px;
    height: 100%;
}
</style>

最后是menuitem，主要的逻辑代码和样式覆盖代码

<template>
  <div class="navMenu">
 
    <label v-for="(navMenu,index) in navMenus" :key="index" @select="select()" class="firstmenu"  @mouseenter="changeActive($event)">
    	<!--只有一级菜单-->
      <el-menu-item v-if="navMenu.children==null"
                    :key="navMenu.id" :data="navMenu" :index="navMenu.name"
                    >
        <!--标题-->
        <span slot="title" class="titleclass">{{navMenu.name}}</span>
      </el-menu-item>
      <!--有多级菜单-->
      <el-submenu v-if="navMenu.children&&navMenu"
                  :key="navMenu.id" :data="navMenu" :index="navMenu.id">
        <template slot="title">
          <span class="titleclass"> {{navMenu.name}}</span>
        </template>
        <!--递归组件，把遍历的值传回子组件，完成递归调用-->
        <nav-menu :navMenus="navMenu.children"></nav-menu>
      </el-submenu>
    </label>
 
  </div>
</template>
 
<script>
  export default {
    name: 'NavMenu', //使用递归组件必须要有
    props: ['navMenus'], // 传入子组件的数据
    data() {
      return {
          
      }
    },
    computed:{
        
    },
    methods: {
        select(index,indexPath){
            console.log(index)
        },
        changeActive($event) {
            console.log($event.currentTarget.querySelector('li'))
            // $event.currentTarget.querySelector('li').className = 'is-active';
        },
    }
  }
</script>
 
<style lang="scss">
    .firstmenu{
       &>li.is-active.el-menu-item::before {
            display: inline-block!important;
            content: "";
            width: 5px!important;
            height: 20px!important;
            border-radius: 10px!important;
            position: absolute;
            left: 0px;
            top: 19px;
            background: #455eec;
        }
    }
    
    .titleclass{
        padding-left: 60px;
        text-align: center;
    }
    .is-active{
        background-color:white !important;
    }
    .is-opened{
        background-color:white !important;
    }
    .el-menu-item:hover{
        background-color:white !important;
    }
    .el-submenu__title:hover{
        background-color:white !important;
    }
</style>

 总结：学到了很多css知识