Vue.js 构建可扩展卡片组件：展示专家水管工信息

应用场景介绍

在现代网站和应用程序中，卡片组件是一种广泛使用的设计元素，用于展示信息并吸引用户。本博客将介绍如何使用 Vue.js 构建一个可扩展的卡片组件，用于展示专家水管工的信息。

代码基本功能介绍

该卡片组件具有以下基本功能：

动态加载专家水管工数据并显示他们的信息，包括姓名、职称、评分和价格。
允许用户查看水管工的详细信息，例如他们的个人资料图片、描述和联系信息。
提供一个可定制的编辑器，允许用户创建和修改卡片内容。
使用第三方库集成地图、图表和日历等高级功能。

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

数据加载和显示

使用 Vue.js 的 v-for 指令和 plumbers 数组动态加载水管工数据。每个水管工的信息都显示在一个单独的卡片中，包括：

<div
  v-for="plumber in plumbers"
  :key="plumber.id"
  class="flex flex-row items-center p-4 hover:bg-gray-100"
>
  <div class="flex-shrink-0">
    <img
      :src="`https://source.unsplash.com/random/100x100`"
      alt="Plumber"
      class="rounded-full w-10 h-10"
    />
  </div>
  <div class="flex-grow ml-4">
    <h2 class="text-base font-semibold">{{ plumber.name }}</h2>
    <p class="text-sm text-gray-500">{{ plumber.title }}</p>
    <div class="flex items-center">
      <van-icon name="star-o" size="16" color="#FFC107" />
      <span class="text-sm ml-1">{{ plumber.rating }}</span>
    </div>
  </div>
  <div>
    <span class="text-sm font-semibold">{{ plumber.price }}</span>
  </div>
</div>

编辑器集成

集成 Wangeditor 组件，提供一个可定制的编辑器，允许用户创建和修改卡片内容。

<editor
  ref="editor"
  :config="editorConfig"
  @created="handleEditorCreated"
/>

const editorConfig = ref({
  placeholder: "请输入内容...",
});
const editor = ref();

const handleEditorCreated = (editorInstance) => {
  // Attach the editor instance to the ref
  editor.value = editorInstance;
  console.log("editor.value", editor.value, editorInstance);
};

第三方库集成

使用 ECharts、Calendar 和 BMap 等第三方库集成高级功能，例如图表、日历和地图。

<e-charts
  :options="options"
  :theme="theme"
  style="width: 600px; height: 400px"
/>

<calendar
  :options="calendarOptions"
  :events="events"
/>

<b-map
  :center="center"
  :zoom="zoom"
  :map-style="mapStyle"
/>