vue实现点击当前栏目高亮效果

vue实现点击当前栏目高亮效果

下面的栏目是通过矢量字体图标遍历出来的

首先在data定义一个数组

  data() {
    return {
      columnBtn: [
        { name: 'el-icon-back' },
        { name: 'el-icon-s-home' },
        { name: 'el-icon-menu' },
        { name: 'el-icon-user-solid' },
        { name: 'el-icon-switch-button' },
      ]
    }
  },

然后编辑columnBtn渲染结构，注意注释的代码端，通过动态写入class,然后

<template>
  <el-container :style="{ backgroundImage: loginBg }">
    <el-header height="12vh">
    </el-header>
    <el-main>
      <router-view></router-view>
    </el-main>
    <el-footer height="12vh">
      <div style="position: absolute;bottom:-1%;left:39%">
      <!-- 注意注释的代码段开始 -->

        <div v-for="item in columnBtn" style="float:left">
          <div :class="'gray1' + ' ' + item.name" :style="{ color: active == item.name ? '#fd7522' : '#fff' }" @click="ColumnBtnSelect(item.name)"></div>

      <!-- 注意注释的代码段结束 -->

        </div>
      </div>
    </el-footer>
  </el-container>
</template>

 再通过点击事件获取columnBtn的name进行判断是否颜色高亮

<script>
export default {
  name: 'layout',
  data() {
    return {
      loginBg: `url(${require('../../assets/img/globalBg.png')})`, // 登录页背景图
      columnBtn: [
        { name: 'el-icon-back' },
        { name: 'el-icon-s-home' },
        { name: 'el-icon-menu' },
        { name: 'el-icon-user-solid' },
        { name: 'el-icon-switch-button' },
      ],
      active: '',
    }
  },
  created() {},
  methods: {
    ColumnBtnSelect(nam) {
      this.active = nam
    },
  },
}
</script>

<style lang="scss">
.el-header,
.el-footer {
  color: #333;
  text-align: center;
  line-height: 12vh;
}
.el-main {
  color: #333;
  height: 76vh;
}
//涉及的样式代码开始
.gray1 {
  width: 4vw;
  height: 6vh;
  margin-right: 0.5vw;
  background-image: linear-gradient(-30deg, #363f54 0%, #4a5671 25%, #5d6c8d 51%, #a4b3c6 100%),
    linear-gradient(#282c37, #282c37);
  background-blend-mode: normal, normal;
  box-shadow: 0vw 1vw 1vw 0vw rgba(0, 1, 0, 0.3), inset 0vw -0.3vw 0vw 0vw rgba(0, 0, 0, 0.3);
  border-radius: 0.7vw;
  line-height: 6vh;
  font-size: 2vw;
  color: #fff;
  font-weight: bold;
}
.active {
  color: #fd7522;
}
//涉及的样式代码结束
</style>