{"_id":"q-builds","_rev":"3-e31f397f52b367a669d06130b1ebe4cd","name":"q-builds","dist-tags":{"latest":"3.5.1"},"versions":{"3.4.0":{"author":{"name":"qbuilds-admin"},"bundleDependencies":[],"deprecated":false,"description":"QBuilds自定义表单设计器，是一款前端表单生成器,生成的表单以JSON格式体现，使用它可以通过可视化拖拽的方式快速构建出功能完备的表单。相比手写模板代码,它可以大大提高表单开发的效率和体验。","homepage":"https://www.supersit.com/","keywords":["quick-form","qbuilds","element-ui","form-designer"],"main":"dist/qbuilds.umd.js","name":"q-builds","private":false,"version":"3.4.0","_id":"q-builds@3.4.0","_nodeVersion":"14.17.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-OdNBQgbVu5O8sU0D5ZVNHvK461RseKowpGxThxpYOlCSi3qJybK8Z1z/2T0QmKRCS2kfodXMmfCs2rz7vBxQyA==","shasum":"0ec68d00a83d720d2d3e37c27b32a6531ec53a7b","tarball":"https://registry.npmjs.org/q-builds/-/q-builds-3.4.0.tgz","fileCount":15,"unpackedSize":41656589,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAbD5023lzhFtZ7KmzCSPQMlGShOQe0i9LMX3zLZREXwIhAKjQeVP1SeoGdF7xdG7EtzsowbAga9oO+XP9eBh4J7/5"}]},"_npmUser":{"name":"wanliq","email":"33955341@qq.com"},"directories":{},"maintainers":[{"name":"wanliq","email":"33955341@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/q-builds_3.4.0_1706090590789_0.8665636571198194"},"_hasShrinkwrap":false},"3.4.1":{"author":{"name":"qbuilds-admin"},"bundleDependencies":[],"deprecated":false,"description":"QBuilds自定义表单设计器，是一款前端表单生成器,生成的表单以JSON格式体现，使用它可以通过可视化拖拽的方式快速构建出功能完备的表单。相比手写模板代码,它可以大大提高表单开发的效率和体验。","homepage":"https://www.supersit.com/","keywords":["quick-form","qbuilds","element-ui","form-designer"],"main":"dist/qbuilds.umd.js","name":"q-builds","private":false,"version":"3.4.1","_id":"q-builds@3.4.1","_nodeVersion":"14.17.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-wcUjsNhgXJRGB6i/m8kpE49U64zXBb6TpuDnPLKt3uosBd17FGcDr6YO8kqBdbI/6fJMt55jv7UcOkltZ2rawQ==","shasum":"fcdb19f1c85ddef4f15240633b1b1052a4bf3d5a","tarball":"https://registry.npmjs.org/q-builds/-/q-builds-3.4.1.tgz","fileCount":15,"unpackedSize":41658797,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB8BNkqoAkmb3rRrTqPyUAErKsYZymIWoNYbz425o444AiEA4KmR0VTrABcHJzjV6VzMh+kSHNF9+vhcnCfOjQ+1Hco="}]},"_npmUser":{"name":"wanliq","email":"33955341@qq.com"},"directories":{},"maintainers":[{"name":"wanliq","email":"33955341@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/q-builds_3.4.1_1706104602695_0.700157432620663"},"_hasShrinkwrap":false},"3.5.0":{"author":{"name":"qbuilds-admin"},"deprecated":false,"description":"QBuilds自定义表单设计器，是一款前端表单生成器,生成的表单以JSON格式体现，使用它可以通过可视化拖拽的方式快速构建出功能完备的表单。相比手写模板代码,它可以大大提高表单开发的效率和体验。","homepage":"https://www.supersit.com/","keywords":["quick-form","qbuilds","element-ui","form-designer"],"main":"dist/qbuilds.umd.js","name":"q-builds","private":false,"version":"3.5.0","_id":"q-builds@3.5.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-a6V05RcPD/38AgOR8ZHg913KKcFTpl6yMktFbveb32M5AnmAo64Kp7YH+5JB6ZrbA5gHY9bw+a8K9Qqd9DhytQ==","shasum":"02c6cdf0eb233e4fefa9f2c85f99e8e1361ee612","tarball":"https://registry.npmjs.org/q-builds/-/q-builds-3.5.0.tgz","fileCount":15,"unpackedSize":41659600,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICpdrFD9apgA5zB9Klb0mpagKgj2n4Y0BaSTD2QDyivgAiEA8BZ1BOdY559ci9d/J2iouDmheKHIGCzA/+Pzpny1wOE="}]},"_npmUser":{"name":"wanliq","email":"33955341@qq.com"},"directories":{},"maintainers":[{"name":"wanliq","email":"33955341@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/q-builds_3.5.0_1714282199403_0.7485261707681605"},"_hasShrinkwrap":false},"3.5.1":{"author":{"name":"qbuilds-admin"},"bundleDependencies":[],"deprecated":false,"description":"QBuilds自定义表单设计器，是一款前端表单生成器,生成的表单以JSON格式体现，使用它可以通过可视化拖拽的方式快速构建出功能完备的表单。相比手写模板代码,它可以大大提高表单开发的效率和体验。","homepage":"https://www.supersit.com/","keywords":["quick-form","qbuilds","element-ui","form-designer"],"main":"dist/qbuilds.umd.js","name":"q-builds","private":false,"version":"3.5.1","_id":"q-builds@3.5.1","_nodeVersion":"14.17.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-d3lXtp71ShmRMfNJm4jNATBvjG8HyTSdwuvafXSuUMX3gh1CkAy8ixK0kQ2dNXCdIsUOW+g+rsLyZQPvpphc7w==","shasum":"495590b05942ecbf201962c638fb12eb3aa672ce","tarball":"https://registry.npmjs.org/q-builds/-/q-builds-3.5.1.tgz","fileCount":15,"unpackedSize":41666428,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAyou+o3hR0Dsia/jlXPWGLAnW24W5oqhYEdRDRPOoRQIhAMqgpGmciuPOHjFnF4Som0YOYVXdixVdgY7y3mPfJ0Fe"}]},"_npmUser":{"name":"wanliq","email":"33955341@qq.com"},"directories":{},"maintainers":[{"name":"wanliq","email":"33955341@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/q-builds_3.5.1_1714366685390_0.66593602397484"},"_hasShrinkwrap":false}},"time":{"created":"2024-01-24T10:03:10.788Z","3.4.0":"2024-01-24T10:03:11.097Z","modified":"2024-04-29T04:58:05.857Z","3.4.1":"2024-01-24T13:56:42.970Z","3.5.0":"2024-04-28T05:29:59.687Z","3.5.1":"2024-04-29T04:58:05.671Z"},"maintainers":[{"name":"wanliq","email":"33955341@qq.com"}],"description":"QBuilds自定义表单设计器，是一款前端表单生成器,生成的表单以JSON格式体现，使用它可以通过可视化拖拽的方式快速构建出功能完备的表单。相比手写模板代码,它可以大大提高表单开发的效率和体验。","homepage":"https://www.supersit.com/","keywords":["quick-form","qbuilds","element-ui","form-designer"],"author":{"name":"qbuilds-admin"},"readme":"# 欢迎使用Quick Form\n\n#### QForm是一款高效的Vue低代码表单可视化设计，可以快速方便的搭建自己的应用程序。\n- **系统构成**\n\n> 系统由设计器（QDesigner）和运行器（Qrender）两部分组件构成，其中：\n<br/>\nQDesigner负责表单的布局配置、属性设置、脚本编写等，主要面向系统开发人员、维护工程师、信息化管理人员；\n<br/>\nQrender负责将设计器制作的表单呈现给最终用户；\n\n\n- **组件分类**\n>系统组件一般分为两类：容器组件（container-widget）和字段组件（field-widget）\n<br/>\n容器组件：主要功能是字段组个的承载器，为实现系统的整体布局\n<br/>\n字段组件：主要是为绑定各类字段的属性\n   \n\n\n\n  \n\n### 功能一览\n\n```\n\n- 拖拽式可视化表单设计\n- 支持PC、Pad、H5三种布局\n- 支持运行时动态加载表单\n- 支持表单复杂交互控制\n- 支持自定义CSS样式\n- 集成大量的日常操作函数（基础、对象、数组、日期、字符串、加解密、地址、站点等）\n- 支持自定义校验逻辑\n- 支持国际化多语言\n- 兼容IE 11浏览器\n- 可导出Vue组件、HTML源码\n- 可导出Vue的SFC单文件组件\n- 支持开发自定义组件\n- 支持响应式自适应布局\n- 支持VS Code插件\n- 更多功能等你探究...\n```\n\n\n### 三方组件\n\n| 名称 |版本号 |说明 |安装|\n|--------------------------|---------------------------| ------------------------------|------|\n|element-ui |2.15.1|页面组件（必选）|npm i element-ui@4.0.9\n|echarts|5.4.2 |图表组件（可选） |npm i echarts@4.0.9\n|vue-echarts|6.2.3 |图表组件（可选）,在echars基础上封装，更方便使用 |npm i vue-echarts@4.0.9\n|vue-qr |4.0.9|二维码（可选）|npm i vue-qr@4.0.9\n\n\n\n- **-   echarts: 5.4.2 图表组件**\n```javascript\nimport * as echarts from 'echarts';\nVue.prototype.$echarts = echarts\n```\n\n- **-   vue-echarts: 6.2.3**\n```javascript\nimport VCharts from 'vue-echarts' \nVue.component('v-chart', VCharts)\n```\n- **-   element-ui: 2.15.1**\n```javascript \nimport ElementUI from 'element-ui' \nVue.use(ElementUI, { size: 'medium'> })\n ```\n\n- **-  vue-qr: 4.0.9 二维码**\n```javascript \nnpm i vue-qr@4.0.9\nimport VueQr from 'vue-qr'\nVue.use(VueQr)\n ```\n\n  \n\n### 安装依赖\n\n```\n\nnpm install --registry=https://registry.npm.taobao.org\n\n```\n\n  \n\n### 开发调试\n\n```\n\nnpm run serve\n\n```\n\n  \n\n### 生产环境打包\n\n```\n\nnpm run build\n\n```\n\n  \n\n### 表单设计器 + 表单渲染器打包\n\n```\n\nnpm run package\n\n```\n\n  \n\n### 表单渲染器打包\n\n```\n\nnpm run lib-render\n\n```\n\n  \n\n### 浏览器兼容性\n\n>Chrome（及同内核的浏览器如QQ浏览器、360浏览器等等），Edge, Firefox，Safari，IE 11\n\n  \n\n<br/>\n\n  \n\n### 跟Vue项目集成\n\n  \n\n<br/>\n\n#### 1. 安装包\n\n```bash\nnpm i q-builds\n```\n或\n```bash\nyarn add q-builds\n\n```\n \n\n<br/>\n\n  \n\n#### 2. 引入并全局注册QForm组件\n\n```javascript\n\nimport Vue from 'vue'\n\nimport App from './App.vue'\n\nimport ElementUI from 'element-ui' //引入element-ui库\n\nimport QForm from 'q-builds' //引入QForm库\n\n \nimport 'element-ui/lib/theme-chalk/index.css' //引入element-ui样式\n\nimport 'q-builds/dist/qbuilds.css' //引入QForm样式\n\nVue.config.productionTip = false\n\nVue.use(ElementUI) //全局注册element-ui\n\nVue.use(QForm) //全局注册QForm(同时注册了q-designer和q-render组件)\n\n  \nnew Vue({\n\n    render: h => h(App),\n\n}).$mount('#app')\n\n```\n\n  \n\n<br/>\n\n  \n\n#### 3. 在Vue模板中使用表单设计器组件\n\n```html\n\n<template>\n\n    <q-designer></q-designer>\n\n</template>\n\n  \n<script>\n\nexport default {\n    data() {\n        return {\n\n        }\n    }\n}\n\n</script>\n\n  \n\n<style lang=\"scss\">\n\n    body {\n        margin: 0; /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */\n    }\n\n</style>\n\n```\n\n  \n\n<br/>\n\n  \n\n#### 4. 在Vue模板中使用表单渲染器组件\n\n```html\n\n<template>\n    <div>\n        <!-- 表单渲染器(form-json：由设计器生产的表单样式；form-data：表单绑定的数据；option-data：表单中选择项) -->\n        <q-render :form-json=\"formJson\" :form-data=\"formData\" :option-data=\"optionData\" ref=\"qFormRef\">\n        </q-render>\n          <!-- 数据提交按纽 -->\n          <el-button type=\"primary\" @click=\"submitForm\">Submit</el-button>\n    </div>\n</template>\n\n<script>\n\nexport default {\n\n    data() {\n        return {\n        formJson: {\"widgetList\":[],\"formConfig\":{\"labelWidth\":80,\"labelPosition\":\"left\",\"size\":\"\",\"labelAlign\":\"label-left-align\",\"cssCode\":\"\",\"customClass\":\"\",\"functions\":\"\",\"layoutType\":\"PC\",\"onFormCreated\":\"\",\"onFormMounted\":\"\",\"onFormDataChange\":\"\"}},\n\n        formData: {},\n\n        optionData: {}\n        }\n    },\n\nmethods: {\n    submitForm() {\n        //自定义表单数据保存\n        this.$refs.qFormRef.getFormData().then(formData => {\n            // 如果表单检测成功（此处可以编写自己的数据库写操作）\n            alert( JSON.stringify(formData) )\n\n        }).catch(error => {\n            // 如果表单检查失败\n            this.$message.error(error)\n        })\n    }\n}\n}\n\n</script>\n\n```\n\n \n<br/>\n\n# 版本日志\n## V3.2\n>■添加组件的事件指示标志，便于能快速获悉哪些组件是否编制有脚本<br/>\n■修复文件上传组件不能获取上传列表的问题<br/>\n■增加参数designerConfig.widgetIdReadonly,用于设置是否可编辑widget的编号<br/>\n■增加字段组件的提示(tooltip)和默认值选取<br/>\n■优化字段组件的标签设计器，增加内置默认选项参数，方便后续快捷录入信息<br/>\n■修复表格布局不能调整行列高宽问题<br/>\n■分离组件设置页面，将配置信息分为属性、事件、样式<br/>\n■编辑和浏览状态初始化的组件不同<br/>\n■标签文字实现纵向居中，可自定义标签的字体及样式<br/>\n■表格布局实现边框样式设置，样式分三级：1.表格的外边框(说明：外边框宽度要大于内边框，才能显示出来)2.全局内边框（表格） 3.局部内边框（单元格）<br/>\n■完成单行输入、多行输入、计数器、下拉选项、时间、时间范围、日期、日期范围组件的样式配置<br/>\n<br/>\n## V3.3\n>■修复全部组件<br/>","readmeFilename":"README.md"}