体验 JSX 的灵活性：使用 Vue3 构建基础选项卡组件

2023-11-05 13:17:47

用 Vue3 和 JSX 构建动态选项卡组件

简介

组件化在现代 Web 开发中至关重要，它将 UI 界面分解成可重用的模块，简化了开发和维护过程。Vue3，一个流行的 JavaScript 框架，通过引入 JSX（JavaScript XML）进一步提升了组件化的能力，提供了简洁且富有表现力的语法，使开发者可以轻松构建可扩展的 UI 组件。

本博客将带领你踏上使用 Vue3 和 JSX 构建一个基础选项卡组件的旅程，深入探索 JSX 的灵活性，并揭示如何打造一个动态且可重用的 UI 组件。

理解选项卡组件

选项卡组件是一种常见的 UI 元素，它允许用户在多个内容面板之间切换，每个面板代表不同的选项卡。选项卡组件广泛应用于导航菜单、信息展示、表单管理等场景。

使用 Vue3 和 JSX 构建选项卡组件

1. 创建 Vue3 项目

vue create vue3-tabs

2. 定义 JSX 组件

在 src/components 目录下创建 Tabs.vue 文件：

<template>
  <div class="tabs">
    <div class="tabs-header">
      <button v-for="tab in tabs" :key="tab.id" @click="setActiveTab(tab.id)">
        {{ tab.title }}
      </button>
    </div>
    <div class="tabs-content">
      <slot />
    </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  props: {
    tabs: {
      type: Array,
      required: true,
    },
    activeTab: {
      type: String,
      default: 'tab-1',
    },
  },
  emits: ['update:activeTab'],
  setup(props, { emit }) {
    const activeTab = ref(props.activeTab)

    watch(activeTab, (newTab) => {
      emit('update:activeTab', newTab)
    })

    const setActiveTab = (id) => {
      activeTab.value = id
    }

    return {
      activeTab,
      setActiveTab,
    }
  },
}
</script>

<style scoped>
.tabs {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.tabs-header {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background-color: #eee;
}

.tabs-header button {
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}

.tabs-content {
  flex: 1;
  overflow: auto;
  padding: 1rem;
}

.tabs-content > * {
  display: none;
}

.tabs-content > .active {
  display: block;
}
</style>

3. 使用选项卡组件

在 src/App.vue 文件中使用 Tabs 组件：

<template>
  <Tabs
    :tabs="[
      { id: 'tab-1', title: '选项卡 1' },
      { id: 'tab-2', title: '选项卡 2' },
    ]"
  >
    <div class="tab-content active" id="tab-1">内容 1</div>
    <div class="tab-content" id="tab-2">内容 2</div>
  </Tabs>
</template>