vue仿今日头条网易新闻 tabs 组件，大有学问！

2023-09-28 12:36:03

今日头条和网易新闻 Tabs 组件在 Vue 中的实现

在前端开发中，Tabs 组件是一种常见的 UI 元素，用于将内容划分为不同的区块，方便用户快速切换查看。在本文中，我们将探讨如何使用 Vue.js 构建一个仿照今日头条和网易新闻的 Tabs 组件，并让其能够根据内容的宽度自适应 tab 项的宽度。

准备工作

首先，我们需要安装 Vue 和 Vue Router：

npm install vue vue-router

创建 Vue 项目

使用以下命令创建一个新的 Vue 项目：

vue create my-tabs-component

创建 Tabs 组件

在 src 目录下，创建一个名为 Tabs.vue 的文件，并添加以下代码：

<template>
  <div class="tabs">
    <ul class="tabs__nav">
      <li v-for="tab in tabs" :key="tab.id" class="tabs__nav-item">
        <a :href="tab.href">{{ tab.label }}</a>
      </li>
    </ul>
    <div class="tabs__content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      required: true
    }
  }
}
</script>

<style>
.tabs {
  display: flex;
  flex-direction: column;
}

.tabs__nav {
  display: flex;
  border-bottom: 1px solid #ccc;
}

.tabs__nav-item {
  list-style: none;
  padding: 10px;
}

.tabs__nav-item a {
  text-decoration: none;
  color: #333;
}

.tabs__nav-item a:hover {
  color: #000;
}

.tabs__content {
  padding: 10px;
}
</style>

使用 Tabs 组件

在 App.vue 文件中，将 Tabs 组件注册为全局组件：

import Tabs from './components/Tabs.vue'

export default {
  components: {
    Tabs
  }
}

并在模板中使用 Tabs 组件：

<template>
  <Tabs :tabs="tabs">
    <template v-slot:default>
      <div>Content 1</div>
      <div>Content 2</div>
      <div>Content 3</div>
    </template>
  </Tabs>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { id: 'tab1', href: '#tab1', label: 'Tab 1' },
        { id: 'tab2', href: '#tab2', label: 'Tab 2' },
        { id: 'tab3', href: '#tab3', label: 'Tab 3' }
      ]
    }
  }
}
</script>