Skip to content

vform666/VFormBuilds

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 

Repository files navigation

VFormBuilds

Packaged version of Variant Form

VFormBuilds为VForm打包发布的库文件,不包含源码。

VForm,一款高效的Vue低代码表单,可视化设计,一键生成源码,享受更多摸鱼时间。

image


立即体验

在线Demo

友情链接

Fantastic-admin —— 一款开箱即用的 Vue 中后台管理系统框架(支持Vue2/Vue3)

REBUILD —— 高度可定制化的企业管理系统

功能一览

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

浏览器兼容性

Chrome(及同内核的浏览器如QQ浏览器、360浏览器等等),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/

在线演示:https://www.vform666.com/demo/

VS Code插件:https://www.vform666.com/pages/plugin/

Github仓库:https://github.com/vform666/variant-form

Gitee备份仓库:https://gitee.com/vdpadmin/variant-form

更新日志:https://www.vform666.com/changelog.html

技术交流群:扫如下二维码加群

image

About

Packaged version of Variant Form

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published