在vue中实现点击文字后的高亮显示

最新推荐文章于 2024-01-24 17:40:33 发布

易安sparkle

最新推荐文章于 2024-01-24 17:40:33 发布

阅读量2.2k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43675447/article/details/107010046

版权

vue 专栏收录该内容

40 篇文章 4 订阅

订阅专栏

功能需求

（1）点击导航栏中的相应文字，其所属栏目就高亮显示，那这个页面所属的栏目；
（2）点击文字之后，进入相应的页面，即实现路由跳转。
在这里插入图片描述

实现代码

Bottom.vue：

<template>
  <div id="bottom">
    <ul>
      <li :class="{checkColor:item.ischeck}" @click="changeColor(index)" v-for="(item,index) in nav" :key="index">
        <icon-svg :icon-class="item.icon" />
        {{item.title}}
      </li>
    </ul>
  </div>
</template>

<script>
import menudata from './menudata'
export default {
  name: 'Bottom',
  data(){
    return { 
      nav:null,
      status:0
    }
  },
  mounted(){
    this.nav=menudata.nav;
    this.status=menudata.s;
  },
  methods:{
    changeColor(index){
      // 控制当前页面进行修改
      this.nav[this.status].ischeck=false;
      this.nav[index].ischeck=true;
      this.status=index;

      // 编程式路由 
      // 用a链接会将图标的点击颜色抵消掉
      this.$router.push({
        path:this.nav[index].path
      });

      // 修改底层数据
      menudata.nav=this.nav;
      menudata.s=index;
    }
  }
}
</script>

<style lang="scss" scope>
  @import '../../assets/css/iconfont.css';
  #bottom{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4rem;
    background-color: rgb(240, 240, 240);
    ul{
      display: flex;
      flex-direction: row;
      li{
        flex: 1;
        list-style: none;
        display: flex;
        flex-direction: column;
        text-align: center;
        .svg-icon{
          flex: 1;
          font-size: 1.6rem;
          margin: 0.45rem 2.55rem;
        }
        a{
          flex: 1;
          text-decoration: none;
          color: #000;
          font-size: 0.9rem;
        }
      }
    }
  }
  .checkColor{
    color: green !important;
  }
</style>

组件在加载时，页面重新渲染，数据进行初始化。因此需将数据建成外部的配置文件，通过配置文件加载（配置文件的数据是统一的），即可新建一个名为menudata.js的文件。

menudata.js：

let menudata={
    nav:[
        {
            title:"微信",
            path:"/",
            icon:"xingzhuangjiehe",
            ischeck:false
          },
          {
            title:"通讯录",
            path:"/User",
            icon:"tongxunlu",
            ischeck:false
          },
          {
            title:"发现",
            path:"/Find",
            icon:"faxian",
            ischeck:false
          },
          {
            title:"我的",
            path:"/My",
            icon:"yonghu_zhanghao_wode",
            ischeck:false
          }
    ],
    // 接收之前的变量
    s:0
};
export default menudata;