在使用vue
开发的时候,几乎每个项目里面都会有导航菜单切换,不管是顶部导航菜单、还是侧边导航菜单,切换到当前的菜单,需要给当前的菜单一个height light
,或者添加其它的样式。
类似于这样的效果。
1.导航菜单切换是使用路由跳转
router-link
,vue
会给当前切换到的菜单a
标签添加一个active
的类名,直接给这个类名设置样式就好了。2.如果是自己写的不涉及路由的跳转,类似于
tab
切换的效果,用一个公共变量记录当前切换的key
,对比两个key
是否相当,如果相等添加class
类名。但是这个只适用于tab
切换类似的效果,只设置一个的效果。
<template>
<div class="top-element">
<div v-for="(item,index) in datasource" :class={'currentElement':currentKey==item.key} @click="switch(item.key)">
{{item.key}}
</div>
</div>
</template>
<script>
data(){
return {
datasource:[{key:'1',flag:false},{key:'2',flag:false}]
}
},
methods:{
switch(key){
this.currentKey=key
}
}
</script>
<style lang="scss">
.currentElement{
color:blue;
}
</style>
3.还有一种不涉及路由跳转,但是可以切换多个,类似于折叠面板的效果,同时展开多个,这种效果可以通过给data
设置一个变量flag
默认为false
,当切换的时候通过索引找到在data
中的位置,再设置为true
。
<template>
<div class="top-element">
<div v-for="(item,index) in datasource" :class={'currentElement':currentKey==item.key} @click="switch(item,index)">
{{item.key}}
</div>
</div>
</template>
<script>
data(){
return {
currentKey:"",
datasource:[{key:'1'},{key:'2'}]
}
},
methods:{
switch(item,index){
this.datasource[index].flag=! this.datasource[index].flag;
}
}
</script>
<style lang="scss">
.currentElement{
color:blue;
}
</style>
网友评论