使用 Vue 构建多功能卡片式表单

应用场景

本段代码适用于需要创建多步骤、交互式表单的场景，例如用户注册、资料完善、调查问卷等。它提供了丰富的组件库，如日历、地图、图表和富文本编辑器，可以满足各种数据输入需求。

基本功能

• 多步骤表单导航，支持前进、后退和完成操作
• 丰富的组件库，包括日历、地图、图表和富文本编辑器
• 数据响应式绑定，表单数据实时更新
• 自定义样式，支持根据业务需求调整表单外观

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

1. 组件引入和数据绑定

<script lang="tsx" setup>
import { ref } from 'vue';
import { Calendar } from 'v-calendar';
import { BMap } from 'vue3-baidu-map-gl';
import * as echarts from 'echarts';
import { h } from "vue";
import { createComponent } from 'echarts-for-vue';
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onBeforeUnmount } from 'vue';

const ECharts = createComponent({echarts, h});

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)
};

onBeforeUnmount(() => {
  // Destroy the editor instance before the component is unmounted
  editor.value.destroy();
  editor.value = null;
});

const data = ref({
  calendarOptions: {
    type: 'month',
    // reactive props
    // ...
  },
  mapOptions: {
    center: {
      lng: 116.404,
      lat: 39.915
    },
    zoom: 11,
    // reactive props
    // ...
  },
  echartsOptions: {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line'
    }]
  },
  richTextEditorValue: '',
});
</script>

在 <script> 部分，我们引入了所需的组件并定义了响应式数据对象 data，它包含了各个组件的配置选项。

2. 表单结构和导航

<template>
  <div class="bg-white h-screen flex flex-col justify-between">
    <div
      class="flex items-center justify-between px-4 py-6 border-b border-gray-200"
    >
      <van-icon name="arrow-left" size="24px" color="#1989fa" />
      <div class="text-lg font-semibold text-gray-900">STEP 1/7</div>
      <van-button round type="primary" size="mini">Next</van-button>
    </div>
    <div class="flex-1 px-4 py-8">
      <!-- 表单内容 -->
    </div>
    <div
      class="px-4 py-6 border-t border-gray-200 flex items-center justify-center"
    >
      <van-button round type="primary" size="large">Continue</van-button>
    </div>
  </div>
</template>

<template> 部分定义了表单的基本结构，包括头部导航、表单内容区和底部按钮。导航栏显示当前步骤和前进按钮，底部按钮用于继续或完成表单。

3. 组件渲染

在表单内容区，根据 data 中的配置渲染各个组件。例如，渲染日历：

<Calendar v-model="data.calendarOptions" />

渲染地图：

<BMap v-model="data.mapOptions" />

渲染图表：

<ECharts v-model="data.echartsOptions" />

渲染富文本编辑器：

<Editor v-model="data.richTextEditorValue" :config="editorConfig"
  @created="handleEditorCreated" />

4. 数据响应式绑定

所有组件的配置选项和数据都与 data 对象响应式绑定，这意味着当用户与组件交互时，表单数据会实时更新。

总结与展望

开发这段代码的过程让我深入了解了 Vue 的响应式系统和组件库的强大功能。通过组合不同的组件，可以快速构建出复杂且交互丰富的表单。

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

• 添加表单验证和错误提示
• 实现多语言支持
• 优化组件性能，提高表单加载速度
• 提供更多的组件选择和自定义选项