### Vue-Json-Schema-Form 使用教程 Vue-Json-Schema-Form 是一个基于 JSON Schema 的表单生成工具，它通过 JSON Schema 定义表单结构和验证规则，从而实现动态生成表单的功能。以下是关于 Vue-Json-Schema-Form 的使用方法和示例代码的详细介绍。 #### 1. 安装 Vue-Json-Schema-Form 在项目中安装 Vue-Json-Schema-Form，可以通过 npm 或 yarn 进行安装： ```bash npm install vue-json-schema-form ``` 或者 ```bash yarn add vue-json-schema-form ``` #### 2. 基本概念 Vue-Json-Schema-Form 的核心是通过 JSON Schema 和 UI Schema 来定义表单的结构、验证规则以及界面布局。以下是两个关键概念： - **JSON Schema**：用于定义表单的数据模型和验证规则。 - **UI Schema**：用于定义表单的用户界面布局和样式[^1]。 #### 3. 示例代码 以下是一个完整的 Vue-Json-Schema-Form 示例代码： ```vue <template> <div> <vue-form v-model="formData" :ui-schema="uiSchema" :schema="schema" /> <pre>{{ JSON.stringify(formData, null, 2) }}</pre> </div> </template> <script> import { VueForm } from 'vue-json-schema-form'; export default { components: { VueForm, }, data() { return { formData: {}, // 表单数据绑定对象 schema: { // JSON Schema 定义 type: 'object', required: ['userName', 'age'], // 必填字段 properties: { userName: { type: 'string', title: '用户名', default: 'Liu.Jun', // 默认值 }, age: { type: 'number', title: '年龄', }, bio: { type: 'string', title: '签名', minLength: 10, // 最小长度 default: '知道的越多、就知道的越少', }, }, }, uiSchema: { // UI Schema 定义 bio: { 'ui:options': { placeholder: '请输入你的签名', // 占位符 type: 'textarea', // 输入框类型 rows: 1, // 文本框行数 }, }, }, }; }, }; </script> ``` #### 4. 关键点解析 - **`v-model`**：将表单数据绑定到 `formData` 对象上，当用户填写表单时，`formData` 会自动更新[^2]。 - **`schema`**：定义了表单的结构和验证规则，例如字段类型、必填项、默认值等。 - **`uiSchema`**：提供了对表单界面的自定义能力，例如输入框类型、占位符、文本框行数等。 #### 5. 高级用法 如果需要更复杂的表单编辑器功能，可以参考基于 Vue-Json-Schema-Form 的可视化活动编辑器 `vjsf-demo-editor`，它提供了一个可视化的配置平台，能够快速搭建自己的编辑器项目[^3]。 ```javascript // 示例：动态加载 JSON Schema 和 UI Schema fetch('/api/schema') // 获取后端提供的 JSON Schema .then((response) => response.json()) .then((data) => { this.schema = data.schema; this.uiSchema = data.uiSchema; }); ``` #### 6. 注意事项 - 确保 JSON Schema 和 UI Schema 的格式正确，否则可能导致表单渲染失败。 - 在实际项目中，可以结合后端 API 动态加载 JSON Schema 和 UI Schema，从而实现更加灵活的表单生成逻辑。 ---