schema form editor

creador de formas de esquema

esquema-form-maker es un editor de formularios visual basado en vue.

Para obtener documentación detallada, consulte los capítulos relevantes de la wiki. Instalar dependencias | Ejecutar el editor | Construir el formulario | Exportar el esquema |

Instalar dependencias

Utilice npm nativo para instalar; cnpm no es compatible por el momento.

 npm install

(Consulte la instalación para obtener más detalles)

Ejecutar editor

Después de completar la instalación, ejecute

 npm run dev

Ejecute el editor de formularios y, una vez completado el inicio, abra http://localhost:8080/ para acceder.

(Consulte Operación para obtener más detalles)

construir un formulario

El editor de formularios está dividido en tres áreas a la izquierda, al centro y a la derecha:

barra de componentes

En el extremo izquierdo de la vista está la [Barra de componentes], y puede arrastrar y soltar para agregar los componentes al formulario en el medio [Área de construcción].

área de construcción

En el medio de la vista está el [Área de construcción], que muestra el formulario que se está editando actualmente.
Después de hacer clic para seleccionar uno de los elementos del formulario, puede editarlo en el [Menú de configuración] a la derecha.
Puede presionar ctrl + so cmd + s en cualquier momento durante el proceso de edición para guardar.

(Para más detalles, consulte el formulario Construcción-Área de construcción)

Menú de configuración

En el extremo derecho de la vista está el [Menú de configuración], que le permite editar los elementos del formulario seleccionados en el [Área de construcción].

Esquema de exportación

Después de completar la construcción del formulario, haga clic en el botón [Estructura] en la parte inferior del área de construcción para ver el esquema del formulario en el cuadro de diálogo emergente.
En la esquina superior derecha del cuadro de diálogo del esquema, hay dos botones [Copiar] y [Descargar], que se pueden usar para exportar el esquema.

Renderizar formulario

Después de exportar el esquema, puede utilizar el componente esquema-form-render para volver a renderizar el formulario en su propio proyecto.

Código de muestra:

< 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 >