### 如何在 Vue2 中使用 FormCreate 生成单选、多选和问答表单 FormCreate 是一款基于 Vue 的低代码可视化表单设计器工具，它不仅支持可视化的表单设计，还允许开发者通过配置 JSON Schema 来定义表单结构[^3]。对于不需要可视化界面的情况，可以直接通过 `rule` 属性来定义表单项。 以下是实现单选、多选以及问答表单的具体方式： #### 单选按钮 (Radio) 可以通过设置 `type: 'radio'` 和提供选项数组来创建单选按钮组。以下是一个简单的例子： ```html <template> <div id="app"> <form-create v-model="formData" :rule="formRules"></form-create> </div> </template> <script> export default { data() { return { formData: {}, formRules: [ { type: "radio", field: "singleChoice", title: "请选择一个选项", options: ["选项一", "选项二", "选项三"], value: "", }, ], }; }, }; </script> ``` 此代码片段展示了如何利用 `options` 字段指定可供选择的项。 --- #### 多选框 (Checkbox) 为了创建一个多选框组，可以将 `type` 设置为 `'checkbox'` 并同样传递一个选项数组给 `options` 参数： ```html <template> <div id="app"> <form-create v-model="formData" :rule="formRules"></form-create> </div> </template> <script> export default { data() { return { formData: {}, formRules: [ { type: "checkbox", field: "multipleChoices", title: "请选择多个选项", options: ["选项A", "选项B", "选项C"], value: [], }, ], }; }, }; </script> ``` 在此示例中，`value` 初始为空数组，表示默认未勾选任何选项[^3]。 --- #### 文本输入框 (Text Input) 用于收集用户的自由文本回复（如问答场景中的答案）。这通常涉及普通的文本输入字段 (`type: 'input'`) 或更复杂的富文本编辑器集成。 下面是如何构建基本文本输入框的例子： ```html <template> <div id="app"> <form-create v-model="formData" :rule="formRules"></form-create> </div> </template> <script> export default { data() { return { formData: {}, formRules: [ { type: "input", field: "answer", title: "请输入您的回答", value: "", }, ], }; }, }; </script> ``` 这个案例说明了当用户需要填写开放性问题的回答时应采用何种形式[^3]。 --- ### 组合多种类型的表单控件 如果希望在一个表单里同时包含以上三种类型的控件，则只需扩展 `formRules` 数组即可。例如： ```javascript const formRules = [ { type: "radio", field: "singleChoice", title: "单选题：您最喜欢的颜色是什么？", options: ["红色", "蓝色", "绿色"], value: "", }, { type: "checkbox", field: "multipleChoices", title: "多选题：哪些水果是你喜欢吃的？", options: ["苹果", "香蕉", "橙子"], value: [], }, { type: "input", field: "openEndedQuestion", title: "问答题：描述一下今天的天气。", value: "", }, ]; ``` 这样就可以轻松组合不同种类的问题到同一个表单之中。 --- ### 注意事项 尽管 FormCreate 对于 Vue2 用户非常友好，但它并不自带设计师功能（即无法直接拖拽生成 JsonSchema），这意味着所有的规则都需要手动编写并维护。因此，在实际应用过程中可能需要额外投入时间去调整这些规则以满足具体需求[^1]。 ---