Vue低代码可视化表单: 一款高效的Vue低代码表单、工作流表单,包含表单设计器和表单渲染器,可视化设计,一键生成源码,享受更多摸鱼时间。

代码拉取完成,页面将自动刷新

扫描微信二维码支付

取消

支付完成

richgiteeai

Watch

不关注关注所有动态仅关注版本发行动态关注但不提醒动态

1 Star 0 Fork 946

dody/Vue低代码可视化表单

forked from vdpAdmin/Vue低代码可视化表单

代码 Issues 0 Pull Requests 0 Wiki 统计流水线

服务

加入 Gitee

与超过 1400万开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)

免费加入

已有帐号? 立即登录

克隆/下载

HTTPS SSH SVN SVN+SSH 下载ZIP

提示

下载代码请复制以下命令到终端执行

为确保你提交的代码身份被 Gitee 正确识别,请执行以下命令完成配置

git config --global user.name userName 
git config --global user.email userEmail

初次使用 SSH 协议进行代码克隆、推送等操作时,需按下述提示完成 SSH 配置

1 生成 RSA 密钥

2 获取 RSA 公钥内容,并配置到 SSH公钥中

在 Gitee 上使用 SVN,请访问使用指南

使用 HTTPS 协议时,命令行会出现如下账号密码验证步骤。基于安全考虑,Gitee 建议配置并使用私人令牌替代登录密码进行克隆、推送等操作

Username for 'https://gitee.com': userName

Password for 'https://userName@gitee.com': # 私人令牌

新建文件新建 Diagram 文件

新建子模块

上传文件

分支 2

标签 1

贡献代码

同步代码

创建 Pull Request

了解更多

对比差异通过 Pull Request 同步

同步更新到分支

通过 Pull Request 同步

将会在向当前分支创建一个 Pull
Request,合入后将完成同步

vdpAdmin 更新README. 24e62c3

126 次提交

index_template

public

src

.gitignore

README.md

babel.config.js

install-render.js

install.js

jsconfig.json

license.txt

package.json

vue.config.js

yarn.lock

README

未知许可证

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

![image](https://ks3-cn-beijing.ksyuncs.com/vform-static/img/vform_demo.gif)

<br/>

### 立即体验
[在线Demo](http://120.92.142.115/)

### 🎉🎉<mark>基于VForm的全栈低代码平台已发布</mark>🎉🎉
![meta_low_code](https://vform666.com/mele.png)
<br/>
[美乐低代码——立即进入](https://melecode.com/) (私有部署、开箱即用️,已开源✌✌)️

### 立即体验VForm Pro高级版(提供商业支持)
[Pro Demo](https://www.vform666.com/pro/)

### 视频教程集合:
[B站观看](https://space.bilibili.com/626932375)

### Vue 3正式版已发布
[立即进入](https://gitee.com/vdpadmin/variant-form3-vite)

### 🎉🎉基于Vant组件库的Mobile版本已发布🎉🎉
[立即进入](https://vform666.com/vform-mobile.html)

### 友情链接

[Fantastic-admin](https://hooray.gitee.io/fantastic-admin/) —— 一款开箱即用的 Vue 中后台管理系统框架(支持Vue2/Vue3)

<br/>

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

### 安装依赖
```
npm install --registry=https://registry.npmmirror.com
```

### 开发调试
```
npm run serve
```

### 生产打包
```
npm run build
```

### 表单设计器 + 表单渲染器打包
```
npm run lib
```

### 表单渲染器打包
```
npm run lib-render
```

### 浏览器兼容性
```Chrome(及同内核的浏览器如QQ浏览器、360浏览器等等),Edge, Firefox,Safari,IE 11```

<br/>

### 跟Vue项目集成

<br/>

#### 1. 安装包
 ```bash
 npm i vform-builds
 ```
或
 ```bash
 yarn add vform-builds
 ```

<br/>

#### 2. 引入并全局注册VForm组件
```javascript
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')
```

<br/>

#### 3. 在Vue模板中使用表单设计器组件
```html
<template>
 <v-form-designer></v-form-designer>
</template>

<br/>

#### 4. 在Vue模板中使用表单渲染器组件
```html
<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>
```

<br/>

### 资源链接
<hr>

文档官网:<a href="https://www.vform666.com/" target="_blank">https://www.vform666.com/</a>

在线演示:<a href="http://120.92.142.115/" target="_blank">http://120.92.142.115/</a>

Gitee仓库:<a href="https://gitee.com/vdpadmin/variant-form" target="_blank">https://gitee.com/vdpadmin/variant-form</a>

Github仓库:<a href="https://github.com/vform666/variant-form" target="_blank">https://github.com/vform666/variant-form</a>

VS Code插件:<a href="https://www.vform666.com/plugin/" target="_blank">https://www.vform666.com/plugin/</a>

更新日志:<a href="https://www.vform666.com/changelog.html" target="_blank">https://www.vform666.com/changelog.html</a>

订阅Pro版:<a href="https://www.vform666.com/pro/" target="_blank">https://www.vform666.com/pro/</a>

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

![image](https://vform2022.ks3-cn-beijing.ksyuncs.com/vchat_qrcode.png)

# Variant Form 许可条款 1.0 1. 免责声明:任何情况下根据任何法律,本作者不对用户因使用VariantForm产生的侵权、数据损坏丢失、软硬件故障和违法犯罪等问题承担任何责任; 2. 禁止任何用户对VariantForm进行简单包装后,即声称为自己的产品、销售源码获利; 3. VariantForm为开源项目,获取到源代码的用户可自由修改源码供自身开发使用,可分发build构建后的库代码,也可分发VariantForm源代码(需保留文件头部的作者声明),本作者保留VariantForm的原始著作权; 4. 个人或公司用户均可将VariantForm项目应用于商业项目开发,为支持本项目持续开发,请尽量购买VariantForm Pro版源码订阅更新服务; 5. 如果你不同意本许可条款,请勿使用VariantForm;任何情况下,一旦实际使用VariantForm,则代表你已确定完全同意本许可条款; 6. 条款内容结束。