ng form element

ng-form은 가장 강력한 오픈 소스 Vue 동적 양식 구성 요소를 만들기 위해 최선을 다하고 있습니다.

NG-형태-요소

설명하다 버전 2.1.0부터 국제화를 지원하며 중국어 간체와 영어의 두 가지 언어가 내장되어 있습니다.

온라인 예시

https://jjxliu306.github.io/ng-form-element/dist/index.html

iview 버전 주소 https://gitee.com/jjxliu306/ng-form-iview

element-plus 버전(VUE3 버전) 주소 https://gitee.com/jjxliu306/ng-form-elementplus

백엔드 서비스

ngtool 백엔드 구문 분석 및 검증 기능 https://gitee.com/jjxliu306/ngtool

문서(지속적으로 업데이트됨)

http://www.ng-form.cn

##모바일 단말기 예시 uniapp ng-form 컴포넌트 https://ext.dcloud.net.cn/plugin?id=20207

통합 예시

springboot + vue 기반의 프론트엔드와 백엔드 분리 통합 사례

백엔드 springboot: https://gitee.com/jjxliu306/ng-server

프런트엔드 뷰: https://gitee.com/jjxliu306/ng-ui

예

기본 형태

양식 유효성 검사 및 구성 요소 동적 표시

동적 테이블

소개

Vue 및 Element-UI를 기반으로 한 폼 디자이너입니다. 드래그 앤 드롭으로 양식 페이지를 빠르게 생성할 수 있습니다. 양식을 json 형식으로 내보낼 수도 있고, 다른 사람이 그린 양식을 json 가져오기를 통해 복원할 수도 있습니다.

다른 오픈소스 형태와의 차이점

• 각 구성 요소는 동적으로 숨기거나 표시할 수 있으며 "필수" 외에도 다양한 규칙 확인을 제공하여 표현식 확인 및 일반 확인을 지원합니다.
• 숨겨진 컴포넌트 바인딩 값을 출력하지 않도록 구성하여 출력 데이터 크기를 줄일 수 있습니다.
• 선택적 컨트롤(라디오, 선택, 체크박스)에 대해 선택 후 트리거 호출을 제공하고 표현식을 지원합니다. 다단계 연계가 가능한 선택적 제어를 위한 데이터 연계 기능 지원
• 동적 양식은 작성 및 편집을 위한 별도의 팝업 상자를 제공합니다.
• 다양한 레이아웃 방식, 그리드, 테이블 등의 레이아웃 방식 제공
• 양식 미리보기 모드를 지원하고 모든 양식 콘텐츠는 구성요소화되지 않으며 모든 텍스트가 표시됩니다.
• 선택 컨트롤(라디오, 선택, 체크박스)을 선택한 후 해당 라벨이 별도로 저장되어 쉽게 표시됩니다.

구성 요소

• ng-form-design 양식 디자이너(시각적 작업을 기반으로 양식 페이지를 빠르게 디자인하고 구성 json 또는 페이지 생성)
• ng-form-build 양식 작성기(디자이너에서 얻은 구성 json 데이터를 기반으로 양식 페이지를 빠르게 작성하고 읽기 전용 속성을 추가하고 미리보기 양식을 표시합니다)

설치하다

버전 2.2.0 이상에서는 vue-cli3 이상의 스캐폴딩을 사용하세요.

 npm install --save  ng-form-element

인용하다

 // 导入组件库
import NgFormElement  from 'ng-form-element'
import 'ng-form-element/lib/ng-form-element.css'

등록하다

 // 注册组件库
Vue.use(NgFormElement) 

페이지 참조

 <div id="app"> 
    <ng-form-design  />
</div>

말하다

링크를 클릭하시면 QQ 그룹 채팅에 참여하실 수 있으며, 직접 질문하고 버그를 신고하실 수 있습니다. [커뮤니케이션 그룹: 152592057]