使用 Vue 开发交互式诊所列表卡片

应用场景介绍

该代码片段展示了一个使用 Vue 构建的交互式诊所列表卡片，适用于医疗保健应用。它允许用户浏览附近诊所的信息，包括名称、距离和评级。

代码基本功能介绍

此代码的主要功能是：

• 动态显示诊所列表，包括名称、距离和评级。
• 使用自定义模板定制诊所卡片的标题。
• 禁用评分组件，以指示诊所的评级是固定的。

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

1. 数据准备

在 <script> 标签中，使用 ref 钩子创建一个名为 data 的响应式数组，其中包含诊所信息。

const data = ref([
  {
    name: "Clinic 1",
    distance: "0.8 km away",
    rating: 5,
  },
  // ...
]);

2. 诊所卡片渲染

在 <template> 标签中，使用 v-for 指令遍历 data 数组，并为每个诊所渲染一个 van-card 组件。

<template>
  <div class="flex flex-col space-y-4 p-4">
    <van-card v-for="clinic in data" :key="clinic.name">
      <!-- ... -->
    </van-card>
  </div>
</template>

3. 自定义标题模板

在 van-card 组件中，使用 #title 模板插槽自定义标题。该插槽包含诊所名称、距离和一个图标。

<template #title>
  <div class="flex items-center justify-between">
    <div class="flex items-center">
      <van-icon name="hospital-o" size="20px" color="#007AFF" />
      <div class="ml-2">{{ clinic.name }}</div>
    </div>
    <div class="text-gray-500">{{ clinic.distance }}</div>
  </div>
</template>

4. 禁用评分组件

在标题模板下方，使用 van-rate 组件显示诊所的评级。将 disabled 属性设置为 true 以禁用组件，指示评级是固定的。

<div class="flex items-center justify-between mt-4">
  <van-rate allow-half disabled value="5" />
</div>

总结与展望

开发这段代码的过程是一个很好的学习体验，让我深入了解了 Vue 的响应式系统和模板语法。

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

• 添加交互性，允许用户查看诊所的详细信息。
• 根据用户位置和偏好过滤诊所列表。
• 使用地图组件在地图上显示诊所位置。