Vue.js 中的 Tab 导航栏和下划线跟随效果

2023-11-06 05:19:34

Vue.js 中实现 Tab 导航栏和下划线跟随效果的完整指南

概述

现代 Web 开发中，Tab 导航栏是一种至关重要的组件，它允许用户在不同的页面或内容部分之间无缝切换。为了提升用户体验，下划线跟随效果可以突出显示当前选中的选项卡。本指南将分步介绍如何使用 Vue.js 实现这种效果。

步骤 1：HTML 结构

<div class="tab-container">
  <ul class="tab-list">
    <li class="tab-item" :class="{ 'active': isActiveTab1 }" @click="changeTab(1)">Tab 1</li>
    <li class="tab-item" :class="{ 'active': isActiveTab2 }" @click="changeTab(2)">Tab 2</li>
    <li class="tab-item" :class="{ 'active': isActiveTab3 }" @click="changeTab(3)">Tab 3</li>
  </ul>
  <div class="underline"></div>
</div>

tab-container: 容器元素。
tab-list: 包含选项卡项的列表。
tab-item: 单个选项卡项。
active: 用于切换选项卡项的高亮状态。
changeTab(): 点击选项卡项时触发的 JavaScript 方法。
underline: 跟随激活选项卡项的下划线元素。

步骤 2：CSS 样式

.tab-container {
  display: flex;
}

.tab-list {
  list-style-type: none;
  display: flex;
  padding: 0;
}

.tab-item {
  padding: 10px;
  cursor: pointer;
}

.tab-item.active {
  background-color: #eee;
}

.underline {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
  transition: left 0.3s ease-in-out;
}

flex: 将 tab-container 和 tab-list 水平排列。
list-style-type: none: 移除列表标记。
cursor: pointer: 设置选项卡项可点击。
background-color: #eee: 为激活选项卡项设置背景色。
position: absolute: 定位下划线。
left: 0; bottom: 0; width: 100%; 使下划线覆盖选项卡项。
transition: left 0.3s ease-in-out: 实现下划线跟随效果。

步骤 3：JavaScript 逻辑

export default {
  data() {
    return {
      isActiveTab1: true,
      isActiveTab2: false,
      isActiveTab3: false,
    };
  },
  methods: {
    changeTab(tabIndex) {
      this.isActiveTab1 = tabIndex === 1;
      this.isActiveTab2 = tabIndex === 2;
      this.isActiveTab3 = tabIndex === 3;
    },
  },
};