ng form elementplus

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

NG-FORM-ELEMENTPLUS

설명하다

현재 버전 2.0이 활성화되어 있으며 구성은 기본적으로 버전 1.x와 호환됩니다. 차이점은 다음과 같습니다.

1. 1.x에서는 범위 선택이 가능한지 여부를 결정하기 위해 속성을 통해 날짜를 구성합니다. 버전 2.x에서는 두 가지 구성 요소로 분할됩니다.
2. 2.x 버전은 기본적으로 전역적으로 그리드 레이아웃을 사용합니다. 1.x 구성을 가져온 후 각 구성 요소는 기본적으로 24개의 셀을 차지합니다.

온라인 예 https://jjxliu306.github.io/ng-form-elementplus/dist

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

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

백엔드 서비스

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

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

http://www.ng-form.cn

## 기본양식 샘플

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

동적 테이블

소개

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

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

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

구성 요소

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

설치하다

 npm install --save  ng-form-elementplus

인용하다

 // 导入组件库
import NgFormElementPlus  from 'ng-form-elementplus'
import 'ng-form-elementplus/lib/style.css'

등록하다

 const app = createApp(App)
 
// 注册组件库
app.use(NgFormElementPlus) 

페이지 참조

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

말하다

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