{"id":13716302,"url":"https://github.com/vform666/variant-form","last_synced_at":"2025-05-14T10:13:32.980Z","repository":{"id":37399437,"uuid":"409518032","full_name":"vform666/variant-form","owner":"vform666","description":"A powerful form designer for Vue.","archived":false,"fork":false,"pushed_at":"2024-11-26T10:08:48.000Z","size":1550,"stargazers_count":1859,"open_issues_count":20,"forks_count":319,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-04-03T21:43:01.334Z","etag":null,"topics":["designer","element-ui","form","iview","online-forms","vue","vuejs2"],"latest_commit_sha":null,"homepage":"http://www.vform666.com","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vform666.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-23T08:54:29.000Z","updated_at":"2025-04-02T09:12:07.000Z","dependencies_parsed_at":"2023-01-21T13:15:52.063Z","dependency_job_id":"a4863433-7443-4ecd-a001-6aa777b68886","html_url":"https://github.com/vform666/variant-form","commit_stats":{"total_commits":119,"total_committers":3,"mean_commits":"39.666666666666664","dds":"0.050420168067226934","last_synced_commit":"d349a8487a3783b8a6e0e443752d0c5bb1dedd6e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vform666%2Fvariant-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vform666%2Fvariant-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vform666%2Fvariant-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vform666%2Fvariant-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vform666","download_url":"https://codeload.github.com/vform666/variant-form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248338474,"owners_count":21087208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["designer","element-ui","form","iview","online-forms","vue","vuejs2"],"created_at":"2024-08-03T00:01:09.109Z","updated_at":"2025-04-11T03:38:49.229Z","avatar_url":"https://github.com/vform666.png","language":"Vue","readme":"# Variant Form\n#### 一款高效的Vue低代码表单，可视化设计，一键生成源码，享受更多摸鱼时间。\n\n![image](https://ks3-cn-beijing.ksyuncs.com/vform-static/img/vform_demo.gif)\n\n\u003cbr/\u003e\n\n### 立即体验\n[在线Demo](http://120.92.142.115/)\n\n\n### 🎉🎉\u003cmark\u003e基于VForm的全栈低代码平台已发布\u003c/mark\u003e🎉🎉\n![meta_low_code](https://vform666.com/mele.png)\n\u003cbr/\u003e\n[美乐低代码——立即进入](https://melecode.com/) （私有部署、开箱即用️，已开源✌✌）️\n\n\n### 立即体验VForm Pro高级版（提供商业支持）\n[Pro Demo](https://www.vform666.com/pro/)\n\n### 视频教程集合：\n[B站观看](https://space.bilibili.com/626932375)\n\n### Vue 3正式版已发布\n[立即进入](https://gitee.com/vdpadmin/variant-form3-vite)\n\n### 🎉🎉基于Vant组件库的Mobile版本已发布🎉🎉\n[立即进入](https://vform666.com/vform-mobile.html)\n\n\n### 友情链接\n\n[Fantastic-admin](https://hooray.gitee.io/fantastic-admin/) —— 一款开箱即用的 Vue 中后台管理系统框架（支持Vue2/Vue3）\n\n\n\u003cbr/\u003e\n\n### 功能一览\n```\n\u003e 拖拽式可视化表单设计；\n\u003e 支持PC、Pad、H5三种布局；\n\u003e 支持运行时动态加载表单；\n\u003e 支持表单复杂交互控制；\n\u003e 支持自定义CSS样式；\n\u003e 支持自定义校验逻辑；\n\u003e 支持国际化多语言；\n\u003e 兼容IE 11浏览器；\n\u003e 可导出Vue组件、HTML源码；\n\u003e 可导出Vue的SFC单文件组件；\n\u003e 支持开发自定义组件；\n\u003e 支持响应式自适应布局；\n\u003e 支持VS Code插件；\n\u003e 更多功能等你探究...；\n```\n\n### 安装依赖\n```\nnpm install --registry=https://registry.npmmirror.com\n```\n\n### 开发调试\n```\nnpm run serve\n```\n\n### 生产打包\n```\nnpm run build\n```\n\n### 表单设计器 + 表单渲染器打包\n```\nnpm run lib\n```\n\n### 表单渲染器打包\n```\nnpm run lib-render\n```\n\n### 浏览器兼容性\n```Chrome（及同内核的浏览器如QQ浏览器、360浏览器等等），Edge, Firefox，Safari，IE 11```\n\n\u003cbr/\u003e\n\n### 跟Vue项目集成\n\n\u003cbr/\u003e\n\n#### 1. 安装包\n  ```bash\n  npm i vform-builds\n  ```\n或\n  ```bash\n  yarn add vform-builds\n  ```\n\n\u003cbr/\u003e\n\n#### 2. 引入并全局注册VForm组件\n```javascript\nimport Vue from 'vue'\nimport App from './App.vue'\n\nimport ElementUI from 'element-ui'  //引入element-ui库\nimport VForm from 'vform-builds'  //引入VForm库\n\nimport 'element-ui/lib/theme-chalk/index.css'  //引入element-ui样式\nimport 'vform-builds/dist/VFormDesigner.css'  //引入VForm样式\n\nVue.config.productionTip = false\n\nVue.use(ElementUI)  //全局注册element-ui\nVue.use(VForm)  //全局注册VForm(同时注册了v-form-designer和v-form-render组件)\n\nnew Vue({\n  render: h =\u003e h(App),\n}).$mount('#app')\n```\n\n\u003cbr/\u003e\n\n#### 3. 在Vue模板中使用表单设计器组件\n```html\n\u003ctemplate\u003e\n  \u003cv-form-designer\u003e\u003c/v-form-designer\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    data() {\n      return {\n      }\n    }\n  }\n\u003c/script\u003e\n\n\u003cstyle lang=\"scss\"\u003e\nbody {\n  margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */\n}\n\u003c/style\u003e\n```\n\n\u003cbr/\u003e\n\n#### 4. 在Vue模板中使用表单渲染器组件\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cv-form-render :form-json=\"formJson\" :form-data=\"formData\" :option-data=\"optionData\" ref=\"vFormRef\"\u003e\n    \u003c/v-form-render\u003e\n    \u003cel-button type=\"primary\" @click=\"submitForm\"\u003eSubmit\u003c/el-button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n  export default {\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        formData: {},\n        optionData: {}\n      }\n    },\n    methods: {\n      submitForm() {\n        this.$refs.vFormRef.getFormData().then(formData =\u003e {\n          // Form Validation OK\n          alert( JSON.stringify(formData) )\n        }).catch(error =\u003e {\n          // Form Validation failed\n          this.$message.error(error)\n        })\n      }\n    }\n  }\n\u003c/script\u003e\n```\n\n\u003cbr/\u003e\n\n### 资源链接\n\u003chr\u003e\n\n文档官网：\u003ca href=\"https://www.vform666.com/\" target=\"_blank\"\u003ehttps://www.vform666.com/\u003c/a\u003e\n\n在线演示：\u003ca href=\"http://120.92.142.115/\" target=\"_blank\"\u003ehttp://120.92.142.115/\u003c/a\u003e\n\nGitee仓库：\u003ca href=\"https://gitee.com/vdpadmin/variant-form\" target=\"_blank\"\u003ehttps://gitee.com/vdpadmin/variant-form\u003c/a\u003e\n\nGithub仓库：\u003ca href=\"https://github.com/vform666/variant-form\" target=\"_blank\"\u003ehttps://github.com/vform666/variant-form\u003c/a\u003e\n\nVS Code插件：\u003ca href=\"https://www.vform666.com/plugin/\" target=\"_blank\"\u003ehttps://www.vform666.com/plugin/\u003c/a\u003e\n\n更新日志：\u003ca href=\"https://www.vform666.com/changelog.html\" target=\"_blank\"\u003ehttps://www.vform666.com/changelog.html\u003c/a\u003e\n\n订阅Pro版：\u003ca href=\"https://www.vform666.com/pro/\" target=\"_blank\"\u003ehttps://www.vform666.com/pro/\u003c/a\u003e\n\n技术交流群：扫如下二维码加群\n\n![image](https://vform2022.ks3-cn-beijing.ksyuncs.com/vchat_qrcode.png)\n","funding_links":[],"categories":["精选 LessCode 项目","Vue","Ramda"],"sub_categories":["vform666/variant-form"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvform666%2Fvariant-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvform666%2Fvariant-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvform666%2Fvariant-form/lists"}