Vue二级菜单
- Vue二级菜单
Vue二级菜单 只显示当前点击的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<div class="navList">
<div class="listBlock" :class="{'active_':show===index} "v-for="(item,index) of itemList" @click='showNav(index)' >
<div class="ontNav">
<div class="sw_">
<i class="icon iconfont iconjiankongluwang-hujiaotonghutong"></i>
</div>
<div class="sw">
<span>11</span>
<span>一级菜单</span>
</div>
</div>
<ul class="navCont" v-show="show==index" >
<li class="subLi ellipsis active_n" @click="lookPolygon">
二级菜单
</li>
<li class="subLi">
二级菜单
</li>
</ul>
</div>
</div>1
2
3
4
5
6
7
8
9
10
11
12
13export default {
data() {
return {
itemList:[{},{}],
show:-1, //vue实例 定义一个变量
}
}，
methods:{
showNav(index){
this.show =index
},
}
}Vue二级菜单 点击哪一级展示哪一级 再次点击才关闭
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21<div class="navList">
<div class="listBlock" :class="{'active_':show===index} "v-for="(item,index) of itemList" @click='showToggle(item)' >
<div class="ontNav">
<div class="sw_">
<i class="icon iconfont" :class="item.iconClass"></i>
</div>
<div class="sw">
<span>{{item.count}}</span>
<span>{{item.name}}</span>
</div>
</div>
<ul class="navCont" ref="navCont" v-if="item.isSubshow">
<li class="subLi" v-for="val in item.subItems">
{{val.name}}
</li>
</ul>
</div>
</div>
</div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28export default {
data() {
return {
itemList:[{
name: "交通互助",
isSubshow:false,
count:11,
iconClass:'iconjiankongluwang-hujiaotonghutong',
subItems:[
{
name:"HTML"
},
{
name:"Css"
},
{
name:"JavaScript"
}
]
}],
}
}，
methods:{
showToggle:function(item){
item.isSubshow = !item.isSubshow;
},
}
} - 样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97.listBlock{
width: 132px;
height: 64px;
background: rgba(77, 137, 255, 0.4);
margin-left: 15px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 20px;
position: relative;
}
.listBlock span:nth-of-type(1){
font-size: 18px;
font-weight: 500;
color: #6BD9FE;
}
.listBlock span:nth-of-type(2){
font-size: 14px;
font-weight: 400;
color: #FFFFFF;
}
.ontNav{
width: 100%;
height: 100%;
display: flex;
background: url('../../public/monitor/static/img/divBgdefault.png') no-repeat;
background-size:100% 100% ;
}
.sw_{
width: 50px;
height: 100%;
float: left;
text-align: center;
box-sizing: border-box;
}
.sw_:nth-of-type(1){
width: 50px;
height: 100%;
line-height: 64px;
}
.sw_ i{
font-size: 30px;
color: #4D89FF;
}
.sw{
width: calc(100% - 50px);
padding-right: 2px;
box-sizing: border-box;
}
.sw span{
display: block;
width: 100%;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.sw span:nth-of-type(1){
line-height: 38px;
}
.sw span:nth-of-type(2){
line-height: 15px;
}
.navCont{
width: 167px;
background: rgba(7, 0, 42, 0.39);
border: 1px solid #4D89FF;
position: absolute;
left:190px;
top:0px;
padding: 20px;
box-sizing: border-box;
}
.subLi{
width: 126px;
height: 30px;
line-height: 30px;
background: #12204F;
border: 1px solid #4D89FF;
margin-bottom: 10px;
color: #FFFFFF;
text-align: center;
padding: 0 5px;
box-sizing: border-box;
font-size: 14px;
}
.subLi:last-of-type{
margin-bottom: 0;
}
.active_n{
width: 126px;
height: 32px;
background: #12204F;
color: #6BD9FE!important;
border: 1px solid #6BD9FE!important;
}
