Vue 卡片式引导页开发指南

应用场景介绍

卡片式引导页是一种常见的引导用户了解产品或服务功能的交互方式。它通常以卡片形式呈现，引导用户逐步了解产品或服务的关键功能和优势。

代码基本功能介绍

本代码示例实现了一个简单的卡片式引导页，包含以下功能：

显示卡片内容，包括标题、描述和图片
提供“接受工作”和“跳过”按钮
使用进度指示器显示引导页的当前进度

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

1. 初始化状态

const currentPage = ref(1)

使用 ref 初始化一个响应式状态变量 currentPage，用于跟踪当前引导页的页面。

2. 处理“跳过”按钮点击事件

const handleSkip = () => {
  currentPage.value = 2
}

当用户点击“跳过”按钮时，handleSkip 函数将 currentPage 的值更新为 2，从而跳过引导页的其余部分。

3. 处理“接受工作”按钮点击事件

const handleAccept = () => {
  currentPage.value = 2
}

当用户点击“接受工作”按钮时，handleAccept 函数将 currentPage 的值更新为 2，从而接受工作并继续进行引导页。

4. 进度指示器

<div class="pagination">
  <p class="text-sm text-gray-500">Skip</p>
  <div class="flex items-center space-x-2">
    <div class="w-2 h-2 rounded-full bg-gray-300"></div>
    <div class="w-2 h-2 rounded-full bg-gray-300"></div>
    <div class="w-2 h-2 rounded-full bg-yellow-500"></div>
  </div>
</div>

进度指示器使用三个圆点表示引导页的三个页面。当前页面对应的圆点被着色为黄色，而其他页面对应的圆点则为灰色。

5. 样式

样式使用 CSS-in-JS，定义了卡片、按钮、进度指示器和其他元素的外观。