基于 Vue3 的卡片式 Tab 组件

应用场景

卡片式 Tab 组件是一种常见的 UI 元素，它允许用户在不同的内容面板之间切换。它广泛应用于各种应用程序中，例如电子商务网站、社交媒体平台和信息管理系统。

基本功能

本卡片式 Tab 组件提供了以下基本功能：

**多 Tab 切换：**用户可以在多个 Tab 之间轻松切换。
**内容面板：**每个 Tab 都包含一个内容面板，用于显示相关信息或功能。
**可自定义外观：**组件支持自定义标题、缩略图、价格、数量和按钮样式。
**滑动操作：**用户可以通过滑动来切换 Tab，提供更直观的交互体验。

功能实现步骤及关键代码分析

1. 创建 Tab 组件

<van-tabs v-model="activeTab" :sticky="true">
  <van-tab v-for="item in tabs" :key="item.title">{{ item.title }}</van-tab>
</van-tabs>

van-tabs 组件用于创建 Tab 栏。
v-model="activeTab" 绑定当前激活的 Tab。
:sticky="true" 设置 Tab 栏固定在页面顶部。
van-tab 组件用于创建单个 Tab。

2. 创建内容面板

<van-swipe-cell v-for="item in tabs" :key="item.title">
  <div :style="{ height: '100vh' }">
    <van-card
      :title="item.title"
      :thumb="item.thumb"
      :price="item.price"
      :num="item.num"
    />
    <van-divider />
    <van-row>
      <van-col :span="12">
        <van-button
          :type="item.type"
          :size="item.size"
          :plain="item.plain"
          :loading="item.loading"
          :disabled="item.disabled"
          >{{ item.text }}</van-button
        >
      </van-col>
      <van-col :span="12">
        <van-button
          :type="item.type"
          :size="item.size"
          :plain="item.plain"
          :loading="item.loading"
          :disabled="item.disabled"
          >{{ item.text }}</van-button
        >
      </van-col>
    </van-row>
  </div>
</van-swipe-cell>

van-swipe-cell 组件用于创建可滑动的内容面板。
v-for="item in tabs" 遍历 Tab 数据并为每个 Tab 创建一个内容面板。
van-card 组件用于创建卡片式内容。
van-divider 组件用于创建分隔线。
van-row 和 van-col 组件用于创建按钮布局。
van-button 组件用于创建按钮。

3. 自定义样式和功能

const tabs = [
  {
    title: "Tab 1",
    thumb: "https://source.unsplash.com/random/300x300",
    price: "¥100",
    num: 100,
    type: "primary",
    size: "large",
    plain: false,
    loading: false,
    disabled: false,
    text: "Button",
  },
  {
    title: "Tab 2",
    thumb: "https://source.unsplash.com/random/300x300",
    price: "¥200",
    num: 200,
    type: "success",
    size: "small",
    plain: true,
    loading: true,
    disabled: true,
    text: "Button",
  },
];