vue封装左侧导航栏组件demo
示例demo的样式:然后说一下布局组件的调用逻辑App-->layout-->sidebar-->sid_menu-->menu_item这里我使用覆盖element的样式的方式,达到项目需求,这里学到了很多如何定位dom元素的样式,使用css阴影,如何覆盖样式,如何使用css3的伪类,如何通过鼠标移动事件找到dom元素等首先使用layout组件并设置...
·
示例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知识
更多推荐
已为社区贡献6条内容
所有评论(0)