Vue.js 中构建交互式卡片组件

应用场景

该卡片组件可用于构建交互式用户界面，允许用户在不同选项之间进行选择。例如，它可用于创建调查问卷、选择器或任何需要用户输入的场景。

基本功能

该组件提供以下基本功能：

• 显示一组选项
• 允许用户选择一个选项
• 通过按钮导航到不同的选项集

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

1. 创建数据模型

首先，使用 Vue.js 的 ref 钩子创建数据模型，用于存储组件状态：

const data = ref({
  level: 'newbie',
})

2. 渲染卡片

在模板中，使用 HTML 和 CSS 渲染卡片。它包括一个标题、一组选项以及用于导航的按钮：

<div class="bg-white rounded-lg shadow-lg w-1/2">
  <div class="flex justify-between items-center p-4 border-b border-gray-200">
    <h1 class="text-xl font-semibold">Your activity</h1>
    <div class="flex items-center space-x-2">
      <span>this is used in getting & personalised results & plans for you</span>
    </div>
  </div>
  <div class="p-4">
    <div class="flex items-center justify-between">
      <div class="flex items-center space-x-2">
        <div class="w-2 h-2 rounded-full bg-blue-500"></div>
        <span class="text-sm font-semibold">newbie</span>
      </div>
      <div class="flex items-center space-x-2">
        <div class="w-2 h-2 rounded-full bg-gray-300"></div>
        <span class="text-sm font-semibold">skilled</span>
      </div>
      <div class="flex items-center space-x-2">
        <div class="w-2 h-2 rounded-full bg-gray-300"></div>
        <span class="text-sm font-semibold">expert</span>
      </div>
    </div>
    <div class="mt-4">
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded" @click="prev()">PREV</button>
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded float-right" @click="next()">NEXT</button>
    </div>
  </div>
</div>

3. 处理按钮点击事件

在组件的脚本中，使用 @click 事件处理程序处理按钮点击事件。这些事件处理程序更新 level 数据，以导航到不同的选项集：

const prev = () => {
  // 导航到上一个选项集
}

const next = () => {
  // 导航到下一个选项集
}

4. 样式化卡片

使用 CSS 样式化卡片，使其具有所需的外观和感觉。它包括边框、阴影、字体和颜色：

.bg-white {
  background-color: #ffffff;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.shadow-lg {
  box-shadow: ...;
}

.w-1/2 {
  width: 50%;
}

.flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

.p-4 {
  padding: 1rem;
}

...

总结与展望

开发此卡片组件的过程让我深入了解了 Vue.js 中数据绑定、事件处理和样式化的概念。它可以作为构建各种交互式用户界面的基础。

未来拓展与优化：

• 添加更多自定义选项，例如选项颜色和形状
• 支持键盘导航
• 实现响应式设计，以适应不同的屏幕尺寸