欢迎使用Quick Form

QForm是一款高效的Vue低代码表单可视化设计，可以快速方便的搭建自己的应用程序。

• 系统构成

系统由设计器（QDesigner）和运行器（Qrender）两部分组件构成，其中：

• 组件分类

系统组件一般分为两类：容器组件（container-widget）和字段组件（field-widget）

功能一览

- 拖拽式可视化表单设计
- 支持PC、Pad、H5三种布局
- 支持运行时动态加载表单
- 支持表单复杂交互控制
- 支持自定义CSS样式
- 集成大量的日常操作函数（基础、对象、数组、日期、字符串、加解密、地址、站点等）
- 支持自定义校验逻辑
- 支持国际化多语言
- 兼容IE 11浏览器
- 可导出Vue组件、HTML源码
- 可导出Vue的SFC单文件组件
- 支持开发自定义组件
- 支持响应式自适应布局
- 支持VS Code插件
- 更多功能等你探究...

三方组件

| 名称 |版本号 |说明 |安装| |--------------------------|---------------------------| ------------------------------|------| |element-ui |2.15.1|页面组件（必选）|npm i [email protected] |echarts|5.4.2 |图表组件（可选） |npm i [email protected] |vue-echarts|6.2.3 |图表组件（可选）,在echars基础上封装，更方便使用 |npm i [email protected] |vue-qr |4.0.9|二维码（可选）|npm i [email protected]

• - echarts: 5.4.2 图表组件

import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts

• - vue-echarts: 6.2.3

import VCharts from 'vue-echarts' 
Vue.component('v-chart', VCharts)

• - element-ui: 2.15.1

import ElementUI from 'element-ui' 
Vue.use(ElementUI, { size: 'medium'> })

• - vue-qr: 4.0.9 二维码

npm i [email protected]
import VueQr from 'vue-qr'
Vue.use(VueQr)

安装依赖

npm install --registry=https://registry.npm.taobao.org

开发调试

npm run serve

生产环境打包

npm run build

表单设计器 + 表单渲染器打包

npm run package

表单渲染器打包

npm run lib-render

浏览器兼容性

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

跟Vue项目集成

1. 安装包

npm i q-builds

或

yarn add q-builds

2. 引入并全局注册QForm组件

import Vue from 'vue'

import App from './App.vue'

import ElementUI from 'element-ui' //引入element-ui库

import QForm from 'q-builds' //引入QForm库

 
import 'element-ui/lib/theme-chalk/index.css' //引入element-ui样式

import 'q-builds/dist/qbuilds.css' //引入QForm样式

Vue.config.productionTip = false

Vue.use(ElementUI) //全局注册element-ui

Vue.use(QForm) //全局注册QForm(同时注册了q-designer和q-render组件)

  
new Vue({

    render: h => h(App),

}).$mount('#app')

3. 在Vue模板中使用表单设计器组件

<template>

    <q-designer></q-designer>

</template>

  
<script>

export default {
    data() {
        return {

        }
    }
}

</script>

  

<style lang="scss">

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

</style>

4. 在Vue模板中使用表单渲染器组件

<template>
    <div>
        <!-- 表单渲染器(form-json：由设计器生产的表单样式；form-data：表单绑定的数据；option-data：表单中选择项) -->
        <q-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="qFormRef">
        </q-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.qFormRef.getFormData().then(formData => {
            // 如果表单检测成功（此处可以编写自己的数据库写操作）
            alert( JSON.stringify(formData) )

        }).catch(error => {
            // 如果表单检查失败
            this.$message.error(error)
        })
    }
}
}

</script>

版本日志

V3.2

■添加组件的事件指示标志，便于能快速获悉哪些组件是否编制有脚本 ■修复文件上传组件不能获取上传列表的问题 ■增加参数designerConfig.widgetIdReadonly,用于设置是否可编辑widget的编号 ■增加字段组件的提示(tooltip)和默认值选取 ■优化字段组件的标签设计器，增加内置默认选项参数，方便后续快捷录入信息 ■修复表格布局不能调整行列高宽问题 ■分离组件设置页面，将配置信息分为属性、事件、样式 ■编辑和浏览状态初始化的组件不同 ■标签文字实现纵向居中，可自定义标签的字体及样式 ■表格布局实现边框样式设置，样式分三级：1.表格的外边框(说明：外边框宽度要大于内边框，才能显示出来)2.全局内边框（表格） 3.局部内边框（单元格） ■完成单行输入、多行输入、计数器、下拉选项、时间、时间范围、日期、日期范围组件的样式配置