使用 Vue.js 和 vant-ui 构建可切换卡片

应用场景

本代码适用于需要在页面中展示一组可切换卡片的场景，如推荐内容、分类列表、个人信息等。卡片可以包含标题、内容和操作按钮，并支持自定义样式。

基本功能

• 可切换卡片：通过选项卡控制不同卡片的显示。
• 卡片自定义：可以自定义卡片的背景、标题和内容，以及添加按钮或其他交互元素。
• 响应式设计：卡片在不同设备上可以自适应布局。

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

1. 安装依赖项

npm install vant-ui echarts-for-vue vue3-baidu-map-gl

2. 导入组件

import { createComponent } from "echarts-for-vue";
import { VanTabs, VanTab, VanCard, VanButton, VanIcon } from "vant";

3. 创建卡片组件

<template>
  <div class="flex flex-col items-center justify-center h-full">
    <van-card
      class="w-full h-full"
      shadow="always"
      :style="{
        backgroundImage:
          'url(https://source.unsplash.com/random/300x300)',
      }"
    >
      <template #header>
        <div class="flex items-center justify-between">
          <div class="text-2xl font-bold">推荐</div>
          <van-icon name="more-o" size="24" color="#999" />
        </div>
      </template>
      <template #content>
        <div class="flex flex-col items-center justify-center h-full">
          <van-button
            round
            type="primary"
            size="large"
            :style="{
              backgroundColor: '#1989fa',
              borderColor: '#1989fa',
            }"
          >
            去看看
          </van-button>
        </div>
      </template>
    </van-card>
  </div>
</template>

4. 创建选项卡组件

<template>
  <van-tabs v-model="activeTab" swipeable>
    <van-tab title="推荐">
      <Card />
    </van-tab>
    <van-tab title="分类">
      <Card />
    </van-tab>
    <van-tab title="我的">
      <Card />
    </van-tab>
  </van-tabs>
</template>

<script>
import { ref } from "vue";
import Card from "./Card.vue";

export default {
  components: { Card },
  setup() {
    const activeTab = ref("推荐");
    return {
      activeTab,
    };
  },
};
</script>

5. 自定义样式

可以在 <style> 标签中添加自定义样式，如：

#app {
  margin-top: 60px;
}

.van-card {
  background-size: cover;
  background-position: center;
}

总结与展望

通过这段代码，我们可以实现可切换卡片的功能，并根据需要自定义卡片样式和内容。在开发过程中，我学习到了 vant-ui 的使用，以及如何将多个组件组合起来实现复杂的功能。

未来，该卡片功能可以进一步拓展和优化，例如：

• 添加更多卡片类型，如图片卡片、视频卡片等。
• 支持卡片的拖拽排序和删除。
• 集成更多第三方组件，如地图、图表等。