### Array Configuration Example

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/rules/array.md

This example demonstrates various `uiSchema` configurations for array fields, including custom widgets, item options, and toolbar settings.

```json
{
    schema: {
        type: 'object',
        properties: {
            listOfString: {
                type: 'array',
                title: 'List of strings',
                items: {
                    type: 'string',
                    default: 'lorem ipsum'
                }
            },
            multipleChoicesList: {
                type: 'array',
                title: 'Multiple Choices',
                items: {
                    type: 'string',
                    enum: ['foo', 'bar']
                },
                default: ['foo', 'bar']
            },
            fixedItemsList: {
                type: 'array',
                title: 'Fixed Items',
                items: [
                    {
                        title: 'A string',
                        type: 'string',
                        default: 'lorem ipsum'
                    },
                    {
                        title: 'A boolean',
                        type: 'boolean',
                        default: false,
                    },
                ],
                additionalItems: {
                    title: 'A string',
                    type: 'string',
                    default: 'lorem ipsum'
                },
            },
        }
    },
    uiSchema: {
        listOfString: {
            items: {
                name: {
                    'ui:options': {
                        placeholder: 'Please enter a name'
                    }
                }
            }
        },
        multipleChoicesList: {
            'ui:widget': 'CheckboxesWidget'
        },
        fixedItemsList: {
            items: [
                {
                    'ui:options': {
                        type: 'textarea'
                    }
                },
                {
                    'ui:options': {
                        activeText: '开',
                        inactiveText: '关'
                    }
                },
                {
                    'ui:options': {
                        placeholder: 'Please enter'
                    }
                }
            ],
            additionalItems: {
                'ui:options': {
                    step: 10
                }
            }
        },
        unorderable: {
            'ui:options': {
                sortable: false,
            },
        },
        unremovable: {
            'ui:options': {
                removable: false,
            },
        },
        noToolbar: {
            'ui:options': {
                addable: false,
                sortable: false,
                removable: false,
            },
            items: {
                'ui:options': {
                    title: '不显示操作条'
                }
            }
        },
        fixedNoToolbar: {
            'ui:options': {
                addable: false,
                sortable: false,
                removable: false,
            },
        },
    },
    errorSchema: {
        nestedList: {
            items: {
                items: {
                    'err:required': '请输入Inner item name'
                }
            }
        }
    },
    formData: {
        multipleChoicesList: ['foo', 'bar'],
        fixedItemsList: ['Some text', true],
        nestedList: [['lorem', 'ipsum'], ['dolor']],
        unorderable: ['one', 'two'],
        unremovable: ['one', 'two'],
        noToolbar: ['one', 'two'],
        fixedNoToolbar: [42, true, 'additional item one', 'additional item two'],
    }
}
```

--------------------------------

### Install Vue JSON Schema Form

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/README.md

Install the library using npm or yarn. Choose the appropriate version based on your Vue and UI framework setup.

```bash
# 安装
# vue2+elementUi 版本
npm install --save @lljj/vue-json-schema-form element-ui

# 或者：
yarn add @lljj/vue-json-schema-form
```

--------------------------------

### Install Vue JSON Schema Form

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/en/guide/README.md

Install the library using npm or yarn package managers.

```bash
# npm
npm install --save @lljj/vue-json-schema-form
```

```bash
# yarn
yarn add @lljj/vue-json-schema-form
```

--------------------------------

### CheckboxesWidget Usage Example

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/lib/vue3/vue3-form-element/src/config/widgets/CheckboxesWidget/readme.md

This is a basic JavaScript example demonstrating the usage of console.log. It is part of the CheckboxesWidget documentation.

```javascript
console.log(1);
```

--------------------------------

### Install @lljj/vue-json-schema-form via npm

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/README.md

Use npm to install the core Vue JSON Schema Form package. This is the recommended method for most projects.

```bash
npm install --save @lljj/vue-json-schema-form
```

```bash
yarn add @lljj/vue-json-schema-form
```

--------------------------------

### Schema and Form Data Example

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/design.md

An example illustrating a JSON schema for an object with properties and a corresponding partial `formData`. This is used to demonstrate how the schema is broken down for validation.

```json
schema = {
     type: 'object',
     minProperties: 2,
     required: [
         'firstName',
         'lastName'
     ],
     properties: {
         firstName: {
             type: 'string',
             title: 'First name',
             default: 'Jun'
         },
         lastName: {
             type: 'string',
             title: 'Last name'
         }
     }
};

formData = {
    firstName: 'Jun'
}
```

--------------------------------

### Layout Demonstration with Multiple Configurations

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/layout-config.md

This example demonstrates a form with a 2-column layout applied globally via `formProps.layoutColumn`. Additionally, individual items within 'Object2' are configured with specific widths (33.333%) using `ui:options.width` to showcase mixed layout strategies.

```html
<template>
    <vue-form
        v-model="formData"
        :ui-schema="uiSchema"
        :schema="schema"
        :formProps="{
            layoutColumn: 2
        }"
    >
    </vue-form>
</template>

<script>
export default {
    name: 'Demo',
    data() {
        return {
            formData: {},
            schema: {
                type: 'object',
                properties: {
                    obj1: {
                        title: 'Object1',
                        type: 'object',
                        description: '默认使用表单配置，两列布局',
                        required: [],
                        properties: {
                            input1: {
                                title: '输入框',
                                type: 'string',
                                'ui:options': {
                                    placeholder: '请输入'
                                }
                            },
                            input2: {
                                title: '输入框',
                                type: 'string',
                                'ui:options': {
                                    placeholder: '请输入'
                                }
                            }
                        },
                        'ui:order': [
                            'input1',
                            'input2'
                        ]
                    },
                    object2: {
                        title: 'Object2',
                        type: 'object',
                        description: '通过 ui:width 重置了表单项宽度',
                        required: [],
                        properties: {
                            boolean: {
                                title: '是否选择(Switch)',
                                type: 'boolean',
                                'ui:options': {
                                    width: '33.333%'
                                }
                            },
                            stringRadio: {
                                title: '单选(Radio)',
                                type: 'string',
                                'ui:widget': 'RadioWidget',
                                enum: [
                                    '1',
                                    '2',
                                    '3'
                                ],
                                enumNames: [
                                    '一',
                                    '二',
                                    '三'
                                ],
                                'ui:options': {
                                    width: '33.333%'
                                }
                            },
                            stringSelect: {
                                title: '单选(Select)',
                                type: 'string',
                                'ui:widget': 'SelectWidget',
                                enum: [
                                    '1',
                                    '2',
                                    '3'
                                ],
                                enumNames: [
                                    '一',
                                    '二',
                                    '三'
                                ],
                                'ui:options': {
                                    width: '33.333%'
                                }
                            }
                        },
                        'ui:order': [
                            'boolean',
                            'stringRadio',
                            'stringSelect'
                        ]
                    }
                }
            },
            uiSchema: {
                bio: {
                    'ui:options': {
                        placeholder: '请输入你的签名',
                        type: 'textarea',
                        rows: 1
                    }
                }
            }
        };
    }
};
</script>
```

--------------------------------

### Custom Widget Example with Render Function

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/adv-config.md

This example demonstrates creating a custom widget using Vue's render function. The widget updates its value when a button is clicked and displays the current value. It's configured in `uiSchema` to replace the default input for the 'inputText' field.

```html
<template>
    <vue-form
        v-model="formData"
        :schema="schema"
        :ui-schema="uiSchema"
    >
    </vue-form>
</template>
<script>
    // 实际场景这里可以是 import componentOptions from './widget-components/XXX.vue'
    // 这里为了方便演示demo，直接通过render函数
    const componentOptions = {
        name: 'TestAsyncWidget',
        props: {
            value: {
                type: null,
                default: ''
            }
        },
        render(h) {
            return h('div', {style: { padding: '4px', boxShadow: '0 0  4px 1px rgba(0,0,0,0.1)' }},
                h('button', {
                    attrs: {type: 'button'},
                    style: {marginRight: '6px'},
                    on: {
                        click: () => {
                            this.$emit('input', String(new Date()))
                        }
                    }
                }, '点击更新时间'),
                h('span', this.value)
            );
        }
    }

   export default {
        data() {
            return {
                formData: {},
                schema: {
                    title: '自定义Widget (显示代码查看demo)',
                    type: 'object',
                    required: ['inputText', 'numberEnumRadio'],
                    properties: {
                        inputText: {
                            title: '可以配置全局组件名、或者异步组件函数，或者同步组件options等',
                            type: 'string',
                            default: String(new Date())
                        },
                        numberEnumRadio: {
                            type: 'number',
                            title: '通过组件名(重置为 Radio 渲染)',
                            enum: [1, 2, 3],
                            enumNames: ['Radio - 1', 'Radio - 2', 'Radio - 3']
                        }
                    }
                },
                uiSchema: {
                    numberEnumRadio: {
                        'ui:widget': 'RadioWidget'
                    },
                    inputText: {
                        // 配置组件构造函数或者直接配置全局组件名，比如 'el-input'
                        'ui:widget': componentOptions,
                    }
                }
            }
        }
   }
</script>
```

--------------------------------

### UploadWidget with Custom Slots

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/components.md

Demonstrates how to customize the UploadWidget's appearance and behavior using the `ui:slots` property. This example shows how to replace the default upload button and add custom tip text using VNode objects.

```html
<template>
    <vue-form
        v-model="formData"
        :schema="schema"
    >
    </vue-form>
</template>

<script>
export default {
    name: 'Demo',
    data() {
        return {
            schema: {
                title: '文件上传',
                type: 'object',
                description: '文件上传 使用 el-upload组件，支持所有的 el-upload 参数，<br/>slot 可以通过 slots参数传入数组VNode list',
                properties: {
                    imgUrl: {
                        title: '单个图片',
                        type: 'string',
                        default: 'http://img.alicdn.com/tfs/TB1vYlkdnZmx1VjSZFGXXax2XXa-468-644.jpg_320x5000q100.jpg_.webp',
                        'ui:action': 'https://run.mocky.io/v3/518d7af7-204f-45ab-9628-a6e121dab8ca',
                        'ui:widget': 'UploadWidget',
                        'ui:slots': {
                            default(h) {
                                return h('el-button', {
                                    slot: 'default',
                                    props: {
                                        size: 'mini',
                                        type: 'primary'
                                    },
                                }, ['上传图片'])
                            },
                            tip(h) {
                                return h('div', {
                                    slot: 'tip',
                                    style: {
                                        fontSize: '12px',
                                        color: '#666'
                                    }
                                }, ['注：请上传100 * 100尺寸的图片'])
                            },
                       }
                    },
                    imgUrlList: {
                        title: '多图',
                        type: 'array',
                        'ui:action': 'https://run.mocky.io/v3/518d7af7-204f-45ab-9628-a6e121dab8ca',
                        'ui:btnText': '重新设置上传按钮文字',
                        'ui:widget': 'UploadWidget',
                        // eslint-disable-next-line max-len
                        default: ['http://img.alicdn.com/tfs/TB1vYlkdnZmx1VjSZFGXXax2XXa-468-644.jpg_320x5000q100.jpg_.webp'],
                        items: {
                            type: 'string',
                        }
                    }
                }
            },
            formData: {}
       }
    }
};
</script>
```

--------------------------------

### Object Schema and Validation Example

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/rules/object.md

Demonstrates the usage of an object schema with nested properties and validation rules. It shows how to configure additionalProperties to false for a specific object and how error schemas can be used to display custom error messages.

```html
<template>
    <vue-form
        v-model="formData"
        :schema="schema"
        :error-schema="errorSchema"
    >
        <div slot-scope="{ formData, formRefFn}">
            <pre style="background-color: #eee;">{{ JSON.stringify(formData, null, 4) }}</pre>
            <p><el-button @click="formRefFn().validate()" type="primary">校验数据</el-button></p>
        </div>
    </vue-form>
</template>
<script>
   export default {
        data() {
            return {
                formData: {
                    orderInfo: {
                        a: '11'
                    }
                },
                schema: {
                    id: 'objectSchema',
                    title: '演示：type object',
                    type: 'object',
                    properties: {
                        userInfo: {
                            type: 'object',
                            title: '用户信息',
                            description: '显示用户个人资料',
                            required: ['firstName'],
                            properties: {
                                firstName: {
                                    type: 'string',
                                    title: '名字',
                                    default: 'Jun'
                                },
                                lastName: {
                                    type: 'string',
                                    title: '名字'
                                }
                            }
                        },
                        orderInfo: {
                            type: 'object',
                            title: '订单信息',
                            description: '显示用户订单数据',
                            additionalProperties: false,
                            properties: {
                                orderId: {
                                    type: 'string',
                                    title: '订单Id',
                                    default: '12312311123123'
                                }
                            }
                        }
                    }
                },
                errorSchema: {
                    orderInfo: {
                        'err:additionalProperties': '订单信息不能包含额外的属性'
                    }
                }
            }
        }
   }
</script>

<style>
.genFromComponent_objectSchemaForm .__pathRoot_orderInfo .validateWidget-object .formItemErrorBox{
    margin-top: -15px;
}
</style>
```

--------------------------------

### Configure Form Layout Columns

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/layout-config.md

Set the `layoutColumn` prop in `formProps` to define the number of columns for the entire form. This example sets the form to a 2-column layout.

```js
formProps: {
    layoutColumn: 2
}
```

--------------------------------

### Configure Field Attributes and Widget Properties

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/basic-config.md

Configure UI schema to pass attributes to the Field component and properties to the Widget component. This example shows how to set a placeholder and type for a textarea widget.

```json
{
    "ui:field": true,
    "fieldAttrs": {
        "attr-x": "xxx"
    },
    "type": "textarea",
    "placeholder": "请输入你的内容"
}
```

--------------------------------

### allOf Example: Merging Schemas

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/rules/combining.md

Demonstrates the use of `allOf` to combine multiple schemas. Properties from all schemas are merged. If schemas cannot be merged (e.g., string and number types), the data will always be invalid.

```javascript
schema = {
  "allOf": [
    { "type": "string" },
    { "type": "number" }
 ]
}
```

--------------------------------

### Handling Required Properties in Rendering

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/design.md

A pseudocode example demonstrating how the `required` status for a property is determined and passed down to child components during rendering. This is crucial for correctly applying validation and UI feedback.

```javascript
//伪代码 - required 通过父节点传递props
function render(h) {
    const propertiesVnode = propertiesNameList.map(name => {
        return h(
            ChildField,
            {
                props: {
                    ...,
                    required: Array.isArray(schema.required) 
                        && schema.required.includes(name),
                }
            }
        );
    });
}
```

--------------------------------

### Boolean Type Configuration

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/rules/boolean.md

Configure a boolean field with custom active and inactive text labels using ui-options. This example demonstrates how to set up the schema, ui-schema, and error-schema for a boolean input.

```html
<template>
    <vue-form
        v-model="formData"
        :schema="schema"
        :ui-schema="uiSchema"
        :error-schema="errorSchema"
    >
        <div slot-scope="{ formData }">
            <pre style="background-color: #eee;">{{ JSON.stringify(formData, null, 4) }}</pre>
        </div>
    </vue-form>
</template>
<script>
   export default {
        data() {
            return {
                formData: {},
                schema: {
                    title: '演示：type boolean',
                    type: 'object',
                    properties: {
                        switch: {
                            type: 'boolean',
                            title: '开还是关'
                        }
                    }
                },
                uiSchema: {
                    switch: {
                        'ui:options': {
                            activeText: '开',
                            inactiveText: '关'
                        }
                    }
                },
                errorSchema: {}
            }
        }
   }
</script>
```

--------------------------------

### User Info Form Example

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/basic-config.md

A complete Vue component demonstrating a user information form. It utilizes the `vue-form` component with a defined `schema` prop to structure the form fields, including types, titles, and validation rules like required fields, minimum/maximum values, and minimum length.

```html
<template>
    <vue-form
        v-model="formData"
        :schema="schema"
    >
    </vue-form>
</template>

<script>
export default {
    name: 'Demo',
    data() {
        return {
            formData: {},
            schema: {
                title: 'UserInfo 表单',
                description: 'A simple form example.',
                type: 'object',
                required: [
                    'firstName',
                    'lastName'
                ],
                properties: {
                    firstName: {
                        type: 'string',
                        title: 'First name',
                        default: 'Jun'
                    },
                    lastName: {
                        type: 'string',
                        title: 'Last name'
                    },
                    age: {
                        type: 'integer',
                        title: 'Age',
                        maximum: 80,
                        minimum: 16
                    },
                    bio: {
                        type: 'string',
                        title: 'Bio',
                        minLength: 10
                    },
                    password: {
                        type: 'string',
                        title: 'Password',
                        minLength: 3
                    },
                    telephone: {
                        type: 'string',
                        title: 'Telephone',
                        minLength: 10
                    }
                }
            }
        };
    }
};
</script>
```

--------------------------------

### UI-Schema Expression Example

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/basic-config.md

Demonstrates using mustache expressions within ui-schema for conditional rendering based on parent form data. Supports `parentFormData` and `rootFormData` variables.

```javascript
'ui:title': `{{ parentFormData.age > 18 ? '呵呵呵' : '嘿嘿嘿' }}`
```

--------------------------------

### Vue Form with Number and Integer Schema

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/rules/number.md

This example demonstrates a Vue form with schema configurations for integer (age) and number (price) types, including minimum, maximum, multipleOf, and enum validation.

```html
<template>
    <vue-form
        v-model="formData"
        :schema="schema"
        :ui-schema="uiSchema"
        :error-schema="errorSchema"
    >
        <div slot-scope="{ formData }">
            <pre style="background-color: #eee;">{{ JSON.stringify(formData, null, 4) }}</pre>
        </div>
    </vue-form>
</template>
<script>
   export default {
        data() {
            return {
                formData: {},
                schema: {
                    title: '演示：type number',
                    type: 'object',
                    required: [
                        'age'
                    ],
                    properties: {
                        age: {
                            type: 'integer',
                            title: '年龄',
                            minimum: 10,
                            maximum: 99,
                            default: 18
                        },
                        price: {
                            type: 'number',
                            description: '请输入价格，必须为 0.5 的倍数',
                            title: '价格',
                            multipleOf: 0.5,
                            default: 1,
                        },
                        numberEnum: {
                            type: 'number',
                            title: '数组枚举 (select)',
                            enum: [1, 2, 3],
                            enumNames: ['Select - 1', 'Select - 2', 'Select - 3']
                        }
                    }
                },
                uiSchema: {
                    age: {
                        'ui:widget': 'el-slider',
                        'ui:description': '年龄10 - 99内',
                        'ui:options': {
                            style: {
                                boxShadow: '0 0 3px 1px yellow',
                            }
                        }
                    }
                },
                errorSchema: {
                    age: {
                        'err:options': {
                            required: '请输入年龄 10 - 99'
                        }
                    }
                }
            }
        }
   }
</script>
```

--------------------------------

### Vue Form with anyOf for Data Linkage

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/data-linkage.md

Demonstrates using 'anyOf' to conditionally render form fields based on selected options. This example shows how to set personal information via username or user ID. Click 'Save' to view the formData.

```html
<template>
    <vue-form
        v-model="formData"
        :schema="schema"
        :ui-schema="uiSchema"
        :error-schema="errorSchema"
        @on-submit="handleSubmit"
    >
    </vue-form>
</template>

<script>
export default {
    name: 'Demo',
    data() {
        return {
            formData: {
            },
            schema: {
                title: '人员信息',
                type: 'object',
                properties: {
                    price: {
                        type: 'number',
                        title: '月薪资',
                        default: 99999.99
                    },
                    userInfo: {
                        title: '个人资料设置方式',
                        anyOf: [
                            {
                                title: '通过用户名设置',
                                required: ['firstName'],
                                properties: {
                                    type: {
                                        'ui:widget': 'HiddenWidget',
                                        title: '类型',
                                        type: 'string',
                                        default: 'userInfo',
                                        const: 'userInfo'
                                    },
                                    firstName: {
                                        type: 'string',
                                        title: '名字',
                                        default: 'Jun'
                                    },
                                    lastName: {
                                        type: 'string',
                                        title: '姓',
                                        default: 'Liu'
                                    }
                                }
                            },
                            {
                                title: '通过用户id设置',
                                properties: {
                                    type: {
                                        'ui:widget': 'HiddenWidget',
                                        title: '类型',
                                        type: 'string',
                                        default: 'userId',
                                        const: 'userId'
                                    },
                                    idCode: {
                                        type: 'string',
                                        title: 'ID',
                                        default: '10086'
                                    }
                                }
                            }
                        ]
                    },
                },
                anyOf: [{
                    title: '设置更多信息',
                    properties: {
                        age: {
                            title: '年龄',
                            type: 'number',
                            anyOf: [
                                {
                                    const: 18
                                },
                                {
                                    const: 28
                                }
                            ]
                        },
                        url: {
                            title: '个人主页',
                            format: 'uri',
                            type: 'string',
                            default: 'https://lljj.me'
                        },
                        projects: {
                            title: '项目经验',
                            type: 'array',
                            minItems: 1,
                            items: {
                                type: 'object',
                                anyOf: [
                                    {
                                        title: '在线演示项目',
                                        properties: {
                                            url: {
                                                title: '输入项目地址',
                                                type: 'string',
                                                format: 'uri',
                                                default: 'https://www.demo.com'
                                            }
                                        }
                                    },
                                    {
                                        title: '文字表述项目',
                                        required: ['name'],
                                        properties: {

```

--------------------------------

### Configure Dynamic Placeholder with fui:xxx

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/basic-config.md

Demonstrates how to use the `fui:xxx` function configuration for dynamic UI properties, such as a placeholder that depends on other form data. The function receives parent form data, root form data, and the current property as arguments.

```js
// 例如配置一个动态的 placeholder 属性
'fui:placeholder': (parent, root, prop) => {
    console.log(parent, root, prop);
    return parent.txtColor;
}
```

--------------------------------

### 使用 `@babel/polyfill`

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/polyfill.md

如果项目不使用 `useBuiltIns` 方式，可以通过导入 `@babel/polyfill` 来解决API兼容性问题。确保垫片在其他代码之前加载执行。

```javascript
import "@babel/polyfill";
```

--------------------------------

### UI Schema Configuration Demo

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/basic-config.md

Demonstrates how to customize form widget styles and behavior using UI schema. This includes setting placeholders, descriptions, default values, styles, autofocus, and overriding widget types.

```html
<template>
    <vue-form
        v-model="formData"
        :ui-schema="uiSchema"
        :schema="schema"
    >
    </vue-form>
</template>

<script>
export default {
    name: 'Demo',
    data() {
        return {
            formData: {
                number: 1,
                numberEnumRadio: 2,
                integerRange: 50,
            },
            schema: {
                type: 'object',
                properties: {
                    firstName: {
                        type: 'string',
                        title: 'First name',
                        'ui:placeholder': '请输入FirstName（配置在schema中）'
                    },
                    bio: {
                        type: 'string',
                        title: 'Bio',
                        minLength: 10,
                        'ui:options': {
                            type: 'textarea',
                            placeholder: 'placeholder（配置在schema中）',
                            rows: 4
                        }
                    },
                    inputText: {
                        title: 'Input Text',
                        type: 'string'
                    },
                    number: {
                        title: 'Number (默认渲染组件)',
                        type: 'number'
                    },
                    integerRange: {
                        title: 'Integer range (使用 ElSlider)',
                        type: 'integer',
                        minimum: 42,
                        maximum: 100
                    }
                }
            },
            uiSchema: {
                'ui:order': ['number', '*'],
                inputText: {
                    'ui:description': '这里重置了描述信息',
                    'ui:emptyValue': '',
                    'ui:options': {
                        style: {
                            boxShadow: '0 0 6px 2px #2b9939'
                        },
                        class: {
                            className_hei: true
                        },
                        type: 'textarea',
                        autofocus: true,
                        rows: 6,
                        placeholder: '请输入你的内容'
                    }
                },
                number: {
                    'ui:title': '这里重置了标题'
                },
                integerRange: {
                    'ui:widget': 'el-slider',
                }
            }
        }
    }
};
</script>
```

--------------------------------

### Custom Rule with Regex Example

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/validate.md

Use regular expressions within custom rules to validate multiple array items or fields matching a pattern. This example demonstrates validating all 'imgUrl' fields within the 'imgList' array.

```javascript
// 这里可以选择你喜欢的方法找到你要校验的节点
// 比如匹配：imgList.0.imgUrl imgList.1.imgUrl ...
if (/imgList\.\d+\.imgUrl/.test(field)) {
    return callback('永远校验失败');
}
```

--------------------------------

### anyOf Data Backfilling with const

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/rules/combining.md

Demonstrates how to use `const` within `anyOf` schema options to ensure correct data matching during backfilling. This is particularly useful when different `anyOf` branches share similar data structures.

```javascript
const schema = {
    type: 'object',
    title: '选项',
    required: [],
    anyOfSelect: {
        'ui:title': '渲染组件'
    },
    anyOf: [{
        title: 'el-switch',
        type: 'object',
        properties: {
            schemaOptions: {
                type: 'object',
                properties: {
                    'ui:widget': {
                        title: '使用组件',
                        type: 'string',
                        default: 'el-switch',
                        const: 'el-switch',
                        'ui:hidden': true
                    },
                    other: {
                        title: '其它',
                        type: 'string'
                    }
                }
            }
        }
    }, {
        title: 'el-checkbox组件',
        type: 'object',
        properties: {
            schemaOptions: {
                type: 'object',
                properties: {
                    'ui:widget': {
                        title: '使用组件',
                        type: 'string',
                        default: 'el-checkbox',
                        const: 'el-checkbox',
                        'ui:hidden': true
                    },
                    other: {
                        title: '其它',
                        type: 'string'
                    }
                }
            }
        }
    }]
}
```

--------------------------------

### Null Type Schema Configuration

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/rules/null.md

This example shows how to define a schema with a 'null' type property. The 'null' type field is not rendered, and the formData will have a null value for this property.

```html
<template>
    <vue-form
        v-model="formData"
        :schema="schema"
    >
        <div slot-scope="{ formData }">
            <pre style="background-color: #eee;">{{ JSON.stringify(formData, null, 4) }}</pre>
        </div>
    </vue-form>
</template>
<script>
   export default {
        data() {
            return {
                formData: {},
                schema: {
                    title: '演示：type boolean',
                    type: 'object',
                    properties: {
                        nullType: {
                            type: 'null'
                        }
                    }
                }
            }
        }
   }
</script>
```

--------------------------------

### Widget Props from Schema

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/rules/number.md

The component passes props to the Widget based on schema configuration. For example, `multipleOf` sets the step, and `minimum`/`maximum` set the min/max values.

```javascript
    const props = {};
    if (undefined !== schema.multipleOf) {
        // 组件计数器步长
        props.step = schema.multipleOf;
    }
    if (schema.minimum || schema.minimum === 0) {
        props.min = schema.minimum;
    }
    if (schema.maximum || schema.maximum === 0) {
        props.max = schema.maximum;
    }
```

--------------------------------

### Using anyOf with const and uiSchema

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/rules/combining.md

Demonstrates how `const` values within `anyOf` are rendered as radio buttons, with `const` as the value and `title` as the label. It also shows how `uiSchema` can override or provide additional titles for these options. Common configurations for `anyOf` siblings are passed to the selected sub-schema.

```html
<template>
    <vue-form
        v-model="formData"
        :schema="schema"
        :ui-schema="uiSchema"
        :error-schema="errorSchema"
    >
        <div slot-scope="{ formData, formRefFn }">
            <pre style="background-color: #eee;">{{ JSON.stringify(formData, null, 4) }}</pre>
            <p><el-button @click="formRefFn().validate()" type="primary">校验数据</el-button></p>
        </div>
    </vue-form>
</template>
<script>
   export default {
        data() {
            return {
                formData: {},
                schema: {
                    title: '演示：anyOf',
                    type: 'object',
                    properties: {
                        constVal: {
                            title: 'AnyOf const',
                            type: 'string',
                            anyOf: [
                                {
                                    title: 'schema option1',
                                    const: '111'
                                },
                                {
                                    const: '222'
                                }
                            ]
                        },
                        number: {
                            title: '基础类型anyOf',
                            anyOf: [
                                {
                                    title: '数字为 5 的倍数',
                                    type: 'integer',
                                    multipleOf: 5
                                },
                                {
                                    title: '数字为 3 的倍数',
                                    type: 'integer',
                                    multipleOf: 3
                                }
                            ]
                        },
                        userInfo: {
                            title: '个人资料设置方式',
                            anyOf: [
                                {
                                    title: '通过用户名设置',
                                    required: ['firstName'],
                                    properties: {
                                        firstName: {
                                            type: 'string',
                                            title: '名',
                                            default: 'Jun'
                                        },
                                        lastName: {
                                            type: 'string',
                                            title: '姓',
                                            default: 'Liu'
                                        }
                                    }
                                },
                                {
                                    title: '通过用户id设置',
                                    properties: {
                                        idCode: {
                                            type: 'string',
                                            title: 'ID',
                                            default: '10086'
                                        }
                                    }
                                }
                            ]
                        },
                    }
                },
                uiSchema: {
                    constVal: {
                        'ui:widget': 'RadioWidget',
                        anyOf: [
                            {},
                            {
                                'ui:title': 'ui-option2'
                            }
                        ]
                    },
                    number: {
                        anyOfSelect: {
                            'ui:widget': 'RadioWidget'
                        },
                        // 使用 anyOf 同级的配置会作为公共配置传给当前选中的子schema
                        'ui:widget': 'el-slider',
                        'ui:options': {
                            description: '通过公共配置设置anyOf每一个选项',
                        }
                    },
                    userInfo: {
                        // 使用 anyOfSelect 配置下拉选项组件
                        anyOfSelect: {
                            'ui:title': '选择配置用户类型',
                            // 'ui:widget': 'RadioWidget',
                            'ui:options': {
                                style: {
                                    width: '100%'
                                }
                            }
                        },
                        anyOf: [
                            {
                                firstName: {
                                    'ui:title': 'ui-schema - title 名'
                                }
                            }
                        ]
                    }
                },
                errorSchema: {
                    
                }
            }
        }
    }
</script>
```

--------------------------------

### 手动按需导入 `core-js` 模块

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/polyfill.md

如果 `@babel/polyfill` 导入的垫片不够全，可以手动按需导入缺失的API，例如导入 `Promise` 支持。

```javascript
// 比如提示缺失 Promise
import 'core-js/modules/es6.promise';
```

--------------------------------

### Conditional Rendering with Mustache Expression

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/data-linkage.md

Use 'ui:hidden' with a Mustache expression to conditionally hide a field based on parent form data. This example hides the 'league' field if 'parentFormData.attr' is not 'league'.

```json
{
    "type": "object",
    "properties": {
        "league": {
            "type": "string",
            "title": "联赛",
            "enum": [
                "西甲",
                "英超",
                "中超"
            ],
            "ui:hidden": "{{parentFormData.attr !== 'league'}}",
            "ui:width": "40%"
        }
    }
}
```

--------------------------------

### 配置表单页脚按钮文字

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/i18n.md

通过 `formFooter` 对象配置确认和取消按钮的文字。

```javascript
formFooter = {
    okBtn: 'Save', // 确认按钮文字
    cancelBtn: 'Cancel' // 取消按钮文字
}
```

--------------------------------

### UI Schema Order Configuration

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/rules/object.md

Illustrates how to control the rendering order of object properties using the 'ui:order' property within the ui-schema. The '*' wildcard can be used to include all other properties not explicitly listed.

```javascript
uiSchema = {
    'ui:order': ['number', '*'],
    // 'ui:order': ['firstName', 'lastName'],
}
```

--------------------------------

### 配置表单项的 UI Schema 多语言

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/i18n.md

通过 `ui-schema` 配置表单项的 `title` 等属性，并结合项目自身的翻译方法实现多语言。

```html
<template>
    <vue-form
        v-model="formData"
        :schema="schema"
        :form-footer="formFooter"
        :ui-schema="uiSchema"
    >
    </vue-form>
</template>
<script>
// 模拟语言包
const transKeyMap = {
    userName: 'Username'
};

// 模拟翻译方法
const trans = key => transKeyMap[key] || `transKeyMap.${key}`;

export default {
    name: 'Demo',
    data() {
        return {
            formData: {},
            schema: {
                type: 'object',
                required: [
                    'userName'
                ],
                properties: {
                    userName: {
                        type: 'string',
                        title: '用户名'
                    }
                }
            },
            formFooter: {
                okBtn: 'Save', // 确认按钮文字
                cancelBtn: 'Cancel' // 取消按钮文字
            },
            uiSchema: {
                userName: {
                    'ui:options': {
                        title: trans('userName')
                    },
                }
            },
        };
    }
};
</script>
```

--------------------------------

### UI Schema Array Item Configuration

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/basic-config.md

Illustrates the correct way to configure UI schema for array items, emphasizing that the structure should mirror the schema's item structure, not the formData.

```js
// schema
schema = {
    type: 'object',
    properties: {
        fixedItemsList: {
            type: 'array',
            title: 'A list of fixed items',
            items: [
                {
                    title: 'A string value',
                    type: 'string',
                    maxLength: 2
                }
            ]
        }
    }
}

```

```js
// 正确的配置
uiSchema = {
    fixedItemsList: {
         // 这里保持和 schema 结构相同
         items: [
             {
                 'ui:options': {
                    ...
                }
             }
         ]
    }
}

```

```js
// 错误的配置
uiSchema = {
    fixedItemsList: [
         {
             'ui:options': {
                ...
            }
        }
    ]
}

```

--------------------------------

### Configure Individual Form Item Width

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/layout-config.md

Specify the `ui:width` in the `ui-schema` for a specific form item to control its width. Any valid CSS width value can be used. This example sets an item's width to 50%.

```js
'ui:width': {
    width: '50%'
}
```

--------------------------------

### Get and Set Form Data Path

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/design.md

Utility functions for accessing and modifying nested form data using a path string. Useful for managing high-frequency changes in `formData` without re-rendering the entire component tree.

```javascript
import { vueUtils } from '@lljj/vue-json-schema-form';

// get
vueUtils.getPathVal(rootFormData, curNodePath);

// set
vueUtils.setPathVal(rootFormData, curNodePath, value);
```

--------------------------------

### Integrating Custom Province-City-Area Component

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/adv-config.md

Demonstrates embedding a custom province-city-area linkage component using 'ui:field'. It configures placeholder text for the custom component via 'ui:fieldProps'. This example omits the component import and registration code.

```html
<template>
    <vue-form
        v-model="formData"
        :schema="schema"
        :ui-schema="uiSchema"
    >
        <div slot-scope="{ formData, formRefFn }">
            <pre style="background-color: #eee;">{{ JSON.stringify(formData, null, 4) }}</pre>
        </div>
    </vue-form>
</template>
<script>
   export default {
        data() {
            return {
                formData: {},
                schema: {
                    id: 'DistpickerTest',
                    title: '地址填写',
                    type: 'object',
                    definitions: {
                        item: {
                            title: '名称/编码',
                            type: 'string'
                        },
                        address: {
                            default: {
                                province: 440000,
                                city: "广州市",
                                area: "海珠区"
                            },
                            type: 'object',
                            properties: {
                                province: {
                                    title: '省份',
                                    $ref: '#/definitions/item'
                                },
                                city: {
                                    title: '城市',
                                    $ref: '#/definitions/item'
                                },
                                area: {
                                    title: '区县',
                                    $ref: '#/definitions/item'
                                }
                            }
                        }
                    },
                    required: ['name'],
                    properties: {
                        name: {
                            title: '收件人',
                            type: 'string',
                            default: 'HH'
                        },
                        address1: {
                            $ref: '#/definitions/address'
                        },
                        address3: {
                            $ref: '#/definitions/address'
                        }
                    }
                },
                uiSchema: {
                    name: {
                        'ui:options': {
                            placeholder: '请输入收件人'
                        },
                        'err:options': {
                            required: '请输入收件人'
                        }
                    },
                    address1: {
                        'ui:field': 'DistpickerField',
                        'ui:fieldProps': {
                            placeholders: {
                                  province: '------- 省 --------',
                                  city: '--- 市 ---',
                                  area: '--- 区 ---',
                              }
                        },
                    },
                    address3: {
                        'ui:title': '不使用ui:field',
                    }
                }
            }
        }
   }
</script>
```

--------------------------------

### 动态配置 SelectWidget 的 ui:enumOptions

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/faq.md

演示如何通过动态更新 `uiSchema` 中的 `ui:enumOptions` 来动态配置下拉选择框的选项。适用于需要根据异步数据或用户交互改变选项的场景。

```html
<template>
    <vue-form
        v-model="formData"
        :schema="schema"
        :ui-schema="uiSchema"
    >
    </vue-form>
</template>

<script>
export default {
    name: 'Demo',
    methods: {
        consoleLog(getForm) {
            console.log(getForm());
        },
    },
    data() {
        return {
            formData: {
               name: ''
            },
            schema: {
                type: 'object',
                properties: {
                    name: {
                        title: '选择你是谁',
                        type: 'string',
                    }
                }
            },
            uiSchema: {
                name: {
                    'ui:widget': 'SelectWidget',
                    'ui:enumOptions': [{value: '1',  label: '加载中...'}]
                }
            }
        }
    },
    created() {
        setTimeout(() => {
            Object.assign(this.uiSchema.name, {
                'ui:enumOptions': [{value: '2',  label: '小猫'},{value: '3',  label: '小狗'}]
            })
        }, 3000);
    }
};
</script>
```

--------------------------------

### Custom Rule Function Example

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/validate.md

Define a custom rule function to validate specific fields based on their path and value. This function receives field path, current value, root form data, and a callback. Use a callback with an error message to indicate validation failure.

```javascript
const customRule = ({
    field,
    value,
    rootFormData,
    callback
}) => {
    if (field === 'imgList.0.imgUrl') {
        return callback('永远校验失败');
    }
    return callback();
};
```

--------------------------------

### Babel-Loader 配置 `include`

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/zh/guide/polyfill.md

如果项目使用 `babel-loader`，可以通过配置 `include` 选项来指定需要转译的库文件目录，包括 `@lljj/vue-json-schema-form`。请根据实际项目情况调整路径。

```javascript
{
    test: /\.js$/
    loader: 'babel-loader',
    include: [
        path.resolve(__dirname,'../src'),
        path.resolve(__dirname,'../node_modules/@lljj/vue-json-schema-form') // + 添加这一行
    ]
}
```

--------------------------------

### Basic Vue Form Component Usage

Source: https://github.com/lljj-x/vue-json-schema-form/blob/master/packages/docs/docs/README.md

Demonstrates how to use the VueForm component in a Vue application. It requires importing the component and configuring schema and uiSchema data.

```vue
<template>
    <VueForm
        v-model="formData"
        :ui-schema="uiSchema"
        :schema="schema"
    >
    </VueForm>
</template>

<script >
//  使用
import VueForm from '@lljj/vue-json-schema-form';
import Vue from 'vue';
import ElementUI from 'element-ui';

// 需要配置element全局组件，也可以按需use component
Vue.use(ElementUI);

export default {
    name: 'Demo',
    components: {
        VueForm
    },
    data() {
        return {
            formData: {},
            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: {
                bio: {
                    'ui:options': {
                        placeholder: '请输入你的签名',
                        type: 'textarea',
                        rows: 1
                    }
                }
            }
        };
    }
};
</script>
```