用Vue实现tab栏

开源

个人开源的leno-admin后台管理项目，前端技术栈：reactHooks、ant-design；后端技术栈：koa、mysql、redis，整个项目包含web端、electron客户端、mob移动端、template基础模板，能够满足你快速开发一整套后台管理项目；如果你觉得不错，就为作者点个✨star✨吧，你的支持就是对我最大的鼓励；

演示地址

文档地址

源码github地址

前言

1、tab栏在很多的业务场景都有用到，虽说如今ui框架大多数效果都能实现，但是自己动手去完成这些个效果也不亚于一件令人愉悦之事；
2、以前在学习js的时候相信都用js去实现tab栏切换，无非核心就是用数据驱动视图，其实用Vue实现tab栏也无非是遵循这个根本的思想；

实现效果

实现代码

<template>
  <!--tabs容器-->
  <div class="tabs">
    <!--标签页容器-->
    <div ref="navWrap" class="tabs-nav-wrap">
      <!--标签页头-->
      <div
        :class="[{ 'tab-background': index === tabBackground }, 'tabs-tab']"
        v-for="(item, index) in navList"
        :key="index"
        :data-id="index"
        @click="changeRabFn"
      >
        {{ item.label }}
      </div>
    </div>
    <!--内容展示区域-->
    <div class="content">{{ navList[tabBackground].content }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        {
          label: "标签一",
          content: "内容一",
        },
        {
          label: "标签二",
          content: "内容二",
        },
        {
          label: "标签三",
          content: "内容三",
        },
        {
          label: "标签四",
          content: "内容四",
        },
      ],
      tabBackground: 0, //控制tab栏的背景颜色索引值
    };
  },
  methods: {
    changeRabFn(e) {
      this.tabBackground = Number(e.target.dataset.id);
    },
  },
};
</script>

<style scoped>
.tabs-nav-wrap {
  position: relative;
  border-bottom: 1px solid #dcdee2;
  margin-bottom: 16px;
}
.tabs-tab {
  display: inline-block;
  margin-right: 16px;
  padding: 8px 16px;
  cursor: pointer;
}

.tab-background {
  background-color: tomato;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 600px;
  font-size: 70px;
}
</style>

结语

这个效果其实核心就是用tabBackground来控制tab栏标签背景色和内容的展示，也就是数据驱动视图的变动；