variant form

변형 형식

높은 효율성 VUE 낮은 코드 형태, 시각적 디자인, 소스 코드를 생성하기위한 하나의 클릭, 더 많은 물고기 손길을 자십시오.

즉시 경험

온라인 데모

??? vform- 기반 풀 스택 저 코드 플랫폼이 출시되었습니다. ???

Melalean Code -Immed Every Enter (개인 배포, 상자 사용, 닐 사용, 오픈 소스 사용

vform Pro Advanced Edition을 즉시 경험하십시오 (비즈니스 지원 제공)

프로 데모

비디오 자습서 수집 :

스테이션 B 시계

Vue 3 공식 버전이 출시되었습니다

즉시 입력하십시오

vant 구성 요소 라이브러리를 기반으로 한 모바일 버전?

즉시 입력하십시오

친절한 링크

환상적인 Admin-A Vue 상자에 사용되는 중간 사무실 관리 시스템 프레임 워크 (vue2/vue3 지원)

기능 목록

 > 拖拽式可视化表单设计；
> 支持PC、Pad、H5三种布局；
> 支持运行时动态加载表单；
> 支持表单复杂交互控制；
> 支持自定义CSS样式；
> 支持自定义校验逻辑；
> 支持国际化多语言；
> 兼容IE 11浏览器；
> 可导出Vue组件、HTML源码；
> 可导出Vue的SFC单文件组件；
> 支持开发自定义组件；
> 支持响应式自适应布局；
> 支持VS Code插件；
> 更多功能等你探究...；

설치 의존성

 npm install --registry=https://registry.npmmirror.com

개발 디버깅

 npm run serve

생산 및 포장

 npm run build

양식 Designor+ Form Rendezer 패키지

 npm run lib

형태 렌더링 장치 포장

 npm run lib-render

브라우저 호환성

Chrome（及同内核的浏览器如QQ浏览器、360浏览器等等），Edge, Firefox，Safari，IE 11

VUE 프로젝트와 통합

1. 설치 패키지

npm i vform-builds

또는

yarn add vform-builds

2. vform 구성 요소를 소개하고 등록하십시오

 import Vue from 'vue'
import App from './App.vue'

import ElementUI from 'element-ui'  //引入element-ui库
import VForm from 'vform-builds'  //引入VForm库

import 'element-ui/lib/theme-chalk/index.css'  //引入element-ui样式
import 'vform-builds/dist/VFormDesigner.css'  //引入VForm样式

Vue . config . productionTip = false

Vue . use ( ElementUI )  //全局注册element-ui
Vue . use ( VForm )  //全局注册VForm(同时注册了v-form-designer和v-form-render组件)

new Vue ( {
  render : h => h ( App ) ,
} ) . $mount ( '#app' ) 

3. VUE 템플릿에서 양식 디자이너 구성 요소를 사용하십시오

 < template >
  < v-form-designer > </ v-form-designer >
</ template >

< script >
  export default {
    data ( ) {
      return {
      }
    }
  }
</ script >

< style lang =" scss " >
body {
  margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
}
</ style > 

4. VUE 템플릿에서 양식 렌더링 구성 요소를 사용하십시오

 < template >
  < div >
    < v-form-render :form-json =" formJson " :form-data =" formData " :option-data =" optionData " ref =" vFormRef " >
    </ v-form-render >
    < el-button type =" primary " @click =" submitForm " > Submit </ el-button >
  </ div >
</ template >
< script >
  export default {
    data ( ) {
      return {
        formJson : { "widgetList" : [ ] , "formConfig" : { "labelWidth" : 80 , "labelPosition" : "left" , "size" : "" , "labelAlign" : "label-left-align" , "cssCode" : "" , "customClass" : "" , "functions" : "" , "layoutType" : "PC" , "onFormCreated" : "" , "onFormMounted" : "" , "onFormDataChange" : "" } } ,
        formData : { } ,
        optionData : { }
      }
    } ,
    methods : {
      submitForm ( ) {
        this . $refs . vFormRef . getFormData ( ) . then ( formData => {
          // Form Validation OK
          alert ( JSON . stringify ( formData ) )
        } ) . catch ( error => {
          // Form Validation failed
          this . $message . error ( error )
        } )
      }
    }
  }
</ script >

리소스 링크

---

문서 공식 웹 사이트 : https://www.vform666.com/

온라인 데모 : http://120.92.142.115//

Gitee Ware

github 창고 : https://github.com/vform666/variant-form

vs 코드 플러그인 : https://www.vform666.com/plugin/

업데이트 로그 : https://www.vform666.com/changelog.html

Pro 버전 구독 : https://www.vform666.com/pro/

기술 교환 그룹 : 다음 QR 코드 플러스 그룹 스캔