3.3.1 • Published 8 months ago
qform-build v3.3.1
欢迎使用Quick Form
QForm是一款高效的Vue低代码表单可视化设计,可以快速方便的搭建自己的应用程序。
- 系统构成
系统由设计器(QDesigner)和运行器(Qrender)两部分组件构成,其中: 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 element-ui@4.0.9 |
echarts | 5.4.2 | 图表组件(可选) | npm i echarts@4.0.9 |
vue-echarts | 6.2.3 | 图表组件(可选),在echars基础上封装,更方便使用 | npm i vue-echarts@4.0.9 |
vue-qr | 4.0.9 | 二维码(可选) | npm i vue-qr@4.0.9 |
- - 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 vue-qr@4.0.9
import VueQr from 'vue-qr'
Vue.use(VueQr)
安装依赖
npm install --registry=https://registry.npm.taobao.org
开发调试
npm run serve
生产环境打包
npm run build
表单设计器 + 表单渲染器打包
npm run lib
表单渲染器打包
npm run lib-render
浏览器兼容性
Chrome(及同内核的浏览器如QQ浏览器、360浏览器等等),Edge, Firefox,Safari,IE 11
跟Vue项目集成
1. 安装包
npm i qform-builds
或
yarn add qform-builds
2. 引入并全局注册QForm组件
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui' //引入element-ui库
import QForm from 'qform-builds' //引入QForm库
import 'element-ui/lib/theme-chalk/index.css' //引入element-ui样式
import 'qform-builds/dist/QDesigner.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.局部内边框(单元格) ■完成单行输入、多行输入、计数器、下拉选项、时间、时间范围、日期、日期范围组件的样式配置
V3.3
■修复全部组件