美文网首页
vue 导航菜单切换样式设置

vue 导航菜单切换样式设置

作者: 光头小青蛙 | 来源:发表于2019-09-29 17:40 被阅读0次

    在使用vue开发的时候,几乎每个项目里面都会有导航菜单切换,不管是顶部导航菜单、还是侧边导航菜单,切换到当前的菜单,需要给当前的菜单一个height light,或者添加其它的样式。
    类似于这样的效果。

    image.png
    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>
    

    相关文章

      网友评论

          本文标题:vue 导航菜单切换样式设置

          本文链接:https://www.haomeiwen.com/subject/jrxqpctx.html