vform666 / variant-form Goto Github PK

View Code? Open in Web Editor NEW

1.6K 1.6K 290.0 1.54 MB

A powerful form designer for Vue.

Home Page: http://www.vform666.com

License: Other

JavaScript 33.72% HTML 0.42% Vue 65.41% CSS 0.08% SCSS 0.37%

designer element-ui form iview online-forms vue vuejs2

variant-form's Introduction

Variant Form

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

立即体验

在线Demo

🎉🎉基于VForm的全栈低代码平台已发布🎉🎉

美乐低代码——立即进入（私有部署、开箱即用️，已开源✌✌）️

友情链接

Fantastic-admin —— 一款开箱即用的 Vue 中后台管理系统框架（支持Vue2/Vue3）

功能一览

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

安装依赖

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 vform-builds

或

yarn add vform-builds

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

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')

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

<template>
  <v-form-designer></v-form-designer>
</template>

<script>
  export default {
    data() {
      return {
      }
    }
  }
</script>

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

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

<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>

资源链接

文档官网：https://www.vform666.com/

在线演示：http://120.92.142.115/

Gitee仓库：https://gitee.com/vdpadmin/variant-form

Github仓库：https://github.com/vform666/variant-form

VS Code插件：https://www.vform666.com/plugin/

更新日志：https://www.vform666.com/changelog.html

订阅Pro版：https://www.vform666.com/pro/

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

variant-form's People

Contributors

Stargazers

Watchers

Forkers

maojianfeng axl234 cmg-ceo guoguoqiqi shimengwen xfy196 linken-code william-wu97 lileihappy123 a1669579390 wlailai vincenttv justinchia dannytangwei break60 jqclub huedini royswale perfectchl langmie123 331164885 nieaijun99 geekcheng c2cn xuqin11 youzizi1 qwe104 dennisit bxh1071 dtboy1995 zhzhy86 homeless2010 freedomdebug wuwanhai sainlee ohforest th-heartdawn alexscofield snake19840 jaychang9 nilvxingren ghost2016 githublielei ganqz jamhui sce9966 zengshmily1314 dylanharris nowanys finch001 linecode greaki zxuanhong xlitter muralitob ecnatsidehtog shanmian woxihuanjia salmongit lesliechueng miyaliunian chenchunchang lirongfei123 alvintaoops cxvh chenyuan8059 only-xc nanasmile lyt320 bjdaijun wang050116 lushengbai xiaohan815 arraycto ayufeng bluestone029 yirenkeji555 quiz-ai low-code ramonlln vueleague duanpf cgb-frontend djkko yanglisunny mrsteins pancraschan cocstang zhangzesen neil-he 531431988 donghustone crzaizxw1314 tshong tlmoke xdf020168 akwong77 sunkx zpcsa boxix

variant-form's Issues

栅格列默认两列

栅格现在拖进来默认是两列，这个是在哪里配置的

自定css

lable-width auto

上传文件组件文件类型问题

1.上传组件选择jpg 上传jpg 类型报错不支持下拉选择的jpg 对应的值为jpeg

2.上传组件默认勾选的xls doc 去掉勾选下拉没有选择项

umd模式工具按钮显示乱七八糟

浏览器script标签引入，默认没有显示一个工具按钮。
1.工具按钮配置和文档不对应，乱。
2.分辨率小于1366 自定义插槽按钮位置偏移，明明有空位置。分辨率1366*768，左侧一个菜单栏，vForm 自定义按钮就。。。

  designerConfig: {
            externalLink: true,
            formTemplates: true,
            eventCollapse: true,
            clearDesignerButton: true,//是否显示清空设计器按钮
            previewFormButton: false, //是否显示预览表单按钮
            languageMenu: true,  //是否显示语言切换菜单    
            exportJsonButton: false,  //是否显示导出JSON器按钮
            exportCodeButton: true,  //是否显示导出代码按钮
            generateSFCButton: false,  //是否显示生成SFC按钮 
          }