在前端開(kāi)發(fā)中，我們經(jīng)常遇到根據(jù)用戶(hù)輸入動(dòng)態(tài)生成不同表單項(xiàng)的需求。這類(lèi)動(dòng)態(tài)表單不僅提升了用戶(hù)體驗(yàn)，還可以讓復(fù)雜的交互流程變得簡(jiǎn)潔而高效。本文將詳細(xì)講解如何使用 Vue 3 的響應(yīng)式特性，逐步構(gòu)建一個(gè)遞歸動(dòng)態(tài)表單。

效果預(yù)覽

1. 什么是動(dòng)態(tài)表單

動(dòng)態(tài)表單的核心是：根據(jù)用戶(hù)在表單中的輸入，自動(dòng)調(diào)整后續(xù)表單項(xiàng)的顯示內(nèi)容。例如，用戶(hù)在某個(gè)表單輸入特定的值時(shí)，會(huì)顯示下一個(gè)問(wèn)題或選項(xiàng)，而如果用戶(hù)輸入不同的值，則會(huì)跳轉(zhuǎn)到另外一套問(wèn)題。這種交互使得表單流程更加智能和靈活。

在本文中，我們將創(chuàng)建一個(gè)遞歸的動(dòng)態(tài)表單，表單項(xiàng)之間通過(guò)邏輯相互連接。當(dāng)某個(gè)表單項(xiàng)的值發(fā)生變化時(shí)，它將動(dòng)態(tài)顯示下一個(gè)表單項(xiàng)，或者結(jié)束表單流程。

2. Vue 中表單項(xiàng)的數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)

為了實(shí)現(xiàn)動(dòng)態(tài)表單，我們需要抽象出一個(gè)通用的表單項(xiàng)結(jié)構(gòu)。在這個(gè)案例中，我們定義了一個(gè)叫做 FormItem 的數(shù)據(jù)結(jié)構(gòu)，每個(gè)表單項(xiàng)都可以看作是這個(gè)結(jié)構(gòu)的一個(gè)實(shí)例。它包含表單類(lèi)型、表單內(nèi)容、表單的遞歸關(guān)系等。

表單項(xiàng)數(shù)據(jù)結(jié)構(gòu) (FormItem)

export type FormItemType = 'input' | 'select' | 'checkbox' | 'radio';

export interface FormItem {
  type: FormItemType;  // 表單項(xiàng)的類(lèi)型
  payload: any;        // 表單項(xiàng)的數(shù)據(jù)（如標(biāo)簽、值、選項(xiàng)）
  next: (current: FormItem, acients: FormItem[]) => FormItem | null;  // 選擇下一個(gè)表單項(xiàng)的邏輯
  parent: FormItem | null;  // 父級(jí)表單項(xiàng)
}

每個(gè)表單項(xiàng)有以下幾個(gè)重要部分：

type：表單項(xiàng)的類(lèi)型，比如輸入框、選擇框等。

payload：存儲(chǔ)表單項(xiàng)的實(shí)際內(nèi)容，包括標(biāo)簽、默認(rèn)值、選項(xiàng)等。

next：這是核心的遞歸部分，它是一個(gè)函數(shù)，用來(lái)決定當(dāng)前表單項(xiàng)完成后，應(yīng)該顯示的下一個(gè)表單項(xiàng)是什么。該函數(shù)返回下一個(gè)表單項(xiàng)或 null。

parent：當(dāng)前表單項(xiàng)的父表單項(xiàng)，用來(lái)管理表單項(xiàng)的層級(jí)關(guān)系。

3. 動(dòng)態(tài)創(chuàng)建表單項(xiàng)：createFormItem 函數(shù)

為了簡(jiǎn)化每次創(chuàng)建表單項(xiàng)的流程，我們編寫(xiě)了一個(gè) createFormItem 函數(shù)，這個(gè)函數(shù)幫助我們快速生成一個(gè)表單項(xiàng)，并確保每個(gè)表單項(xiàng)是響應(yīng)式的。

createFormItem 函數(shù)實(shí)現(xiàn)

import { isReactive, reactive } from 'vue';

export function createFormItem(
  formItemType: FormItem['type'],
  payload: FormItem['payload'],
  next?: FormItem['next'],
  parent?: FormItem['parent']
): FormItem {
  if (!next) {
    next = () => null;
  }
  if (!parent) {
    parent = null;
  }

  const nextFunc: FormItem['next'] = (current, acients) => {
    let nextItem = next!(current, acients);
    if (!nextItem) {
      return null;
    }
    nextItem.parent = current;
    if (!isReactive(nextItem)) {
      nextItem = reactive(nextItem);
    }
    return nextItem;
  };

  const formItem: FormItem = reactive({
    type: formItemType,
    payload,
    next: nextFunc,
    parent,
  });

  return formItem;
}

理解 createFormItem

formItemType 和 payload 分別是表單項(xiàng)的類(lèi)型和內(nèi)容。

next 是一個(gè)函數(shù)，用來(lái)決定當(dāng)前表單項(xiàng)的值更新后，應(yīng)該展示的下一個(gè)表單項(xiàng)。

該函數(shù)返回的表單項(xiàng)通過(guò) Vue 的 reactive 方法將其轉(zhuǎn)為響應(yīng)式對(duì)象，以確保后續(xù)的表單變更可以實(shí)時(shí)更新頁(yè)面。

4. 實(shí)際使用：創(chuàng)建表單項(xiàng)實(shí)例

接下來(lái)，我們基于 createFormItem 函數(shù)創(chuàng)建幾個(gè)具體的表單項(xiàng)。下面的例子展示了如何構(gòu)建一個(gè)簡(jiǎn)單的輸入框，然后根據(jù)用戶(hù)的輸入展示不同的表單項(xiàng)：

const item1 = createFormItem(
  'input',                        // 表單類(lèi)型：輸入框
  { label: 'test1', value: '' },   // 數(shù)據(jù)：標(biāo)簽和輸入值
  (current) => (current.payload.value === 'test1' ? item2 : item3)  // 邏輯：如果值為 'test1'，顯示 item2，否則顯示 item3
);

const item2 = createFormItem(
  'select',  // 下拉選擇框
  {
    label: 'test2',
    options: [
      { label: 'test2-1', value: 'test2-1' },
      { label: 'test2-2', value: 'test2-2' },
      { label: 'test2-3', value: 'test2-3' },
    ],
    value: 'test2-1',
  },
  (current) => {
    if (current.payload.value === 'test2-2') {
      return item3;
    } else if (current.payload.value === 'test2-3') {
      return item4;
    } else {
      return null;
    }
  }
);

動(dòng)態(tài)邏輯的關(guān)鍵

item1 是一個(gè)輸入框，用戶(hù)輸入 'test1' 時(shí)會(huì)展示 item2，否則會(huì)展示 item3。

item2 是一個(gè)下拉選擇框，當(dāng)用戶(hù)選擇不同的選項(xiàng)時(shí)，展示不同的表單項(xiàng)。

通過(guò)這樣的邏輯，我們可以根據(jù)用戶(hù)的輸入和選擇動(dòng)態(tài)調(diào)整表單的流程，創(chuàng)建靈活的表單交互。

5. 表單項(xiàng)的遞歸渲染

為了在頁(yè)面上展示這些動(dòng)態(tài)表單項(xiàng)，我們使用 Vue 的遞歸組件。遞歸組件是一種強(qiáng)大的模式，可以幫助我們渲染多層級(jí)的結(jié)構(gòu)，比如父子表單項(xiàng)之間的遞歸關(guān)系。

遞歸組件：FormItemComp.vue

<template>
  <div v-if="formState">
    <!-- 根據(jù)表單類(lèi)型渲染不同表單項(xiàng) -->
    <input v-if="formState.type === 'input'" v-model="formState.payload.value" :placeholder="formState.payload.label" />
    <select v-if="formState.type === 'select'" v-model="formState.payload.value">
      <option v-for="option in formState.payload.options" :key="option.value" :value="option.value">
        {{ option.label }}
      </option>
    </select>
    <!-- 渲染下一個(gè)表單項(xiàng) -->
    <FormItemComp v-if="nextFormItem" :form-state="nextFormItem" />
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  formState: Object,
});

const nextFormItem = computed(() => {
  return formState.next(formState, []);
});
</script>

在這個(gè)遞歸組件中：

根據(jù) formState 的 type 來(lái)渲染不同的表單類(lèi)型（如 input 或 select）。

當(dāng)用戶(hù)在某個(gè)表單項(xiàng)中輸入或選擇內(nèi)容時(shí)，遞歸地展示下一個(gè)表單項(xiàng)。

6. 總結(jié)

通過(guò)本文的講解，我們一步一步構(gòu)建了一個(gè)遞歸動(dòng)態(tài)表單。使用 Vue 的響應(yīng)式系統(tǒng)和遞歸組件，我們可以根據(jù)用戶(hù)輸入的內(nèi)容動(dòng)態(tài)展示后續(xù)表單項(xiàng)。本文所介紹的這種方式特別適用于那些復(fù)雜的、依賴(lài)用戶(hù)輸入的表單場(chǎng)景，如多步驟表單、條件性表單等。

關(guān)鍵點(diǎn)回顧：

表單項(xiàng)結(jié)構(gòu)設(shè)計(jì)：每個(gè)表單項(xiàng)都使用 FormItem 數(shù)據(jù)結(jié)構(gòu)來(lái)定義類(lèi)型、內(nèi)容和遞歸邏輯。

createFormItem 函數(shù)：簡(jiǎn)化了表單項(xiàng)的創(chuàng)建過(guò)程，并確保每個(gè)表單項(xiàng)是響應(yīng)式的。

遞歸渲染：使用 Vue 遞歸組件渲染出多層次的表單結(jié)構(gòu)。

動(dòng)態(tài)交互：通過(guò) next 函數(shù)的邏輯，實(shí)現(xiàn)了表單項(xiàng)之間的動(dòng)態(tài)交互。

到此這篇關(guān)于Vue實(shí)現(xiàn)動(dòng)態(tài)表單的示例詳解的文章就介紹到這了,更多相關(guān)Vue動(dòng)態(tài)表單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論