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

  1. 功能需求

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

  1. 实现代码

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;
  1. 目录结构

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值