Descarga variant form - Descargar el código fuente variant form

variant form

Otras categorias

1.0.0

Descargar

Forma variante

Una forma de código bajo de alta eficiencia Vue, diseño visual, un clic para generar el código fuente, disfrutar de más tiempo con toque de pescado.

Experiencia inmediatamente

Demostración en línea

??? Se ha lanzado la plataforma de código bajo de pila completa basada en VFORM ???

Código Melaleano: ingrese inmediatamente (implementación privada, use el cuadro, use ️, código abierto ✌✌) ️ ️

Experimente la edición avanzada VFORM Pro de inmediato (proporcionando soporte comercial)

Demo pro

Colección de tutoriales de video:

Reloj de estación B

Se ha lanzado la versión oficial de Vue 3

Entrar inmediatamente

?

Entrar inmediatamente

Enlace amistoso

Fantástico-Admin-A Vue Middle Back Office System Framework que se utiliza en el cuadro (admite Vue2/Vue3)

Lista de funciones

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

Dependencia de la instalación

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

Depuración de desarrollo

 npm run serve

Producción y embalaje

 npm run build

Formulario de diseño+ formulario Rendezer empaquetado

 npm run lib

Formulario de envasado del dispositivo de representación

 npm run lib-render

Compatibilidad del navegador

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

Integrado con el proyecto VUE

1. Paquete de instalación

npm i vform-builds

o

yarn add vform-builds

2. Introducir y registrar componentes VForm global

 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. Use el componente de diseñador de formulario en la plantilla Vue

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

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

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

4. Use componentes de representación de formulario en plantillas 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 >