schema form editor

criador de formulário de esquema

schema-form-maker é um editor visual de formulários baseado em vue.

Para documentação detalhada, consulte os capítulos relevantes do wiki. Instale dependências | Execute o editor | Construa o esquema de exportação |

Instalar dependências

Use npm nativo para instalar, cnpm não é compatível no momento.

 npm install

(Consulte a instalação para obter detalhes)

Executar editor

Após concluir a instalação, execute

 npm run dev

Execute o editor de formulários e, após a conclusão da inicialização, abra http://localhost:8080/ para acesso.

(Consulte Operação para obter detalhes)

Crie um formulário

O editor de formulários está dividido em três áreas à esquerda, meio e direita:

Barra de componentes

No lado esquerdo da visualização está a [Barra de Componentes], e você pode arrastar e soltar para adicionar os componentes ao formulário no meio da [Área de Construção].

área de construção

No meio da visualização está a [Área de Construção], que exibe o formulário que está sendo editado no momento.
Após clicar para selecionar um dos itens do formulário, você poderá editá-lo no [Menu Configuração] à direita.
Você pode pressionar ctrl + s ou cmd + s a qualquer momento durante o processo de edição para salvar.

(Para detalhes, consulte Formulário de Construção-Área de Construção)

Menu de configuração

No lado direito da visualização está o [Menu Configuração], que permite editar os itens de formulário selecionados na [Área de Construção].

Esquema de exportação

Após concluir a construção do formulário, clique no botão [Estrutura] na parte inferior da área de construção para visualizar o esquema do formulário na caixa de diálogo pop-up.
No canto superior direito da caixa de diálogo do esquema, existem dois botões [Copiar] e [Download], que podem ser usados ​​para exportar o esquema.

Renderizar formulário

Depois de exportar o esquema, você pode usar o componente schema-form-render para renderizar novamente o formulário em seu próprio projeto.

Código de exemplo:

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