schema form editor

스키마 형태 제작자

Schema-form-maker는 vue를 기반으로 한 시각적 양식 편집기입니다.

자세한 문서는 Wiki의 관련 장을 참조하세요. 편집기 실행 | 양식 내보내기 |

종속성 설치

기본 npm을 사용하여 설치하세요. cnpm은 당분간 지원되지 않습니다.

 npm install

(자세한 내용은 설치를 참고하세요)

편집기 실행

설치 완료 후 실행

 npm run dev

양식 편집기를 실행하고 시작이 완료된 후 http://localhost:8080/ 열어 액세스합니다.

(자세한 내용은 조작 참조)

양식 작성

양식 편집기는 왼쪽, 가운데, 오른쪽의 세 영역으로 나뉩니다.

구성요소 표시줄

뷰의 가장 왼쪽에는 [Component Bar]가 있으며, 드래그 앤 드롭을 사용하여 폼 중앙의 [Building Area]에 컴포넌트를 추가할 수 있습니다.

건축면적

뷰 중앙에는 현재 편집 중인 양식이 표시되는 [빌딩 영역]이 있습니다.
양식 항목 중 하나를 클릭하여 선택한 후 오른쪽 [구성 메뉴]에서 편집할 수 있습니다.
편집 과정 중 언제든지 ctrl + s 또는 cmd + s를 눌러 저장할 수 있습니다.

(자세한 내용은 Form Construction-Building Area를 참조하세요)

구성 메뉴

뷰의 맨 오른쪽에는 [Building Area]에서 선택한 양식 항목을 편집할 수 있는 [Configuration Menu]가 있습니다.

스키마 내보내기

폼 구성을 완료한 후, 구성 영역 하단의 [구조] 버튼을 클릭하면 팝업 대화 상자에서 폼의 스키마를 확인할 수 있습니다.
스키마 대화 상자의 오른쪽 상단에는 스키마를 내보내는 데 사용할 수 있는 [복사] 및 [다운로드] 버튼이 있습니다.

렌더링 형태

스키마를 내보낸 후 Schema-form-render 구성 요소를 사용하여 자신의 프로젝트에서 양식을 다시 렌더링할 수 있습니다.

샘플 코드:

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