schema form editor

schema-form-maker

schema-form-maker is a visual form editor based on vue.

For detailed documentation, see the relevant chapters of the wiki. Install dependencies | Run the editor | Build the form | Export schema | Render the form

Install dependencies

Use native npm to install, cnpm is not supported for the time being.

 npm install

(Refer to installation for details)

Run editor

After completing the installation, execute

 npm run dev

Run the form editor, and after the startup is complete, open http://localhost:8080/ for access.

(Refer to Operation for details)

Build a form

The form editor is divided into three areas on the left, middle and right:

Component bar

On the far left side of the view is the [Component Bar], and you can use drag and drop to add the components to the form in the middle [Building Area].

construction area

In the middle of the view is the [Building Area], which displays the form currently being edited.
After clicking to select one of the form items, you can edit it in the [Configuration Menu] on the right.
You can press ctrl + s or cmd + s at any time during the editing process to save.

(For details, please refer to Form Construction-Building Area)

Configuration menu

On the far right side of the view is the [Configuration Menu], which allows you to edit the selected form items in the [Building Area].

Export schema

After completing the construction of the form, click the [Structure] button at the bottom of the construction area to view the schema of the form in the pop-up dialog box.
In the upper right corner of the schema dialog box, there are two buttons [Copy] and [Download], which can be used to export the schema.

Render form

After exporting the schema, you can use the schema-form-render component to re-render the form in your own project.

Sample code:

< template >
  ...
    <!-- DeviceSchema 为渲染表单需要的 schema -->
    <!-- device 为表单数据 -->
    < SchemaFormRender
      :schema = " DeviceSchema "
      :data = " device "
    />
    < el-button @click = " updateDevice " >
      提交
    </ el-button >
  ...
</ template >
< script >
...
export default {
  ...
  methods : {
    async updateDevice () {
      // 用户操作表单后 this.device 的数据会实时更新
      // 这里可以直接通过 this.device 访问到表单中的数据
      await axios . put ( ` http://api.com/device/ ${ this . device . id } ` , this . device );
      this . $message . success ( '保存成功' );
    }
  }
}
</ script >