Variant Form - 可视化低代码表单 Variant Form - 可视化低代码表单
首页
  • ✨表单模板
  • 📚使用教程 (opens new window)
  • 二次开发
  • GitHub (opens new window)
  • 码云 (opens new window)
  • VForm 3简介
  • VForm 3使用教程 (opens new window)
  • VForm 3二次开发
  • GitHub (opens new window)
  • 码云 (opens new window)
  • VS Code插件
  • iView版本
💰订阅Pro版
  • 更新日志 (opens new window)
  • 常见问题及解答 (opens new window)
  • 技术交流群
  • 人人开源 (opens new window)
  • 好用的.Net权限工作流框架 (opens new window)
  • 零代码地学数据应用搭建平台 (opens new window)
  • Fantastic-admin (opens new window)
  • Rebuild (opens new window)
首页
  • ✨表单模板
  • 📚使用教程 (opens new window)
  • 二次开发
  • GitHub (opens new window)
  • 码云 (opens new window)
  • VForm 3简介
  • VForm 3使用教程 (opens new window)
  • VForm 3二次开发
  • GitHub (opens new window)
  • 码云 (opens new window)
  • VS Code插件
  • iView版本
💰订阅Pro版
  • 更新日志 (opens new window)
  • 常见问题及解答 (opens new window)
  • 技术交流群
  • 人人开源 (opens new window)
  • 好用的.Net权限工作流框架 (opens new window)
  • 零代码地学数据应用搭建平台 (opens new window)
  • Fantastic-admin (opens new window)
  • Rebuild (opens new window)

VForm iView版本

# VForm iView版本

iView版本是由Variant Form交流群热心大佬基于VForm原版定制开发的,功能跟原版完全一样,为广大iView UI库的用户提供了一种低代码表单的实现途径,使用中如有疑问或定制需求可进技术群交流沟通。

VForm iView版本和原版VForm的源代码共用同一源码仓库,iView版源代码对应src/components-iview目录。iView UI库(即view-design)目前支持的版本为4.x。

image

# 🚀 立即体验

iView Demo演示 (opens new window)


# 开发步骤

# 安装依赖

  npm install --registry=https://registry.npm.taobao.org

# 开发运行

  npm run serve-iview

# 生产打包

  npm run build-iview

# 表单设计器 + 表单渲染器打包

  npm run lib-iview

# 表单渲染器打包

  npm run lib-render-iview

# ⚡️ 跟Vue项目集成

# 1. 安装

    npm i vform-iview-builds
    
    yarn add vform-iview-builds
    
    // Make sure to add code blocks to your code group

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

      import Vue from 'vue'
      import App from './App.vue'
      
      import ViewUI from 'view-design'  //引入iView库
      import VForm from 'vform-iview-builds'  //引入iView版本VForm库文件
      
      import 'view-design/dist/styles/iview.css'  //引入iView样式
      import 'vform-iview-builds/dist/VFormDesigner-iView.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')
      
      // Make sure to add code blocks to your code group

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

        <template>
        <v-form-designer></v-form-designer>
        </template>
        
        <script>
        export default {
          data() {
            return {
            }
          }
        }
        </script>
        
        <style lang="scss">
        body {
        margin: 0;  /* 如果页面出现垂直滚动条,则加入此行CSS以消除之 */
        }
        </style>
        
        // Make sure to add code blocks to your code group

        # 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>
          
          // Make sure to add code blocks to your code group

          # 🔔 技术交流群

          微信技术交流群
          # 微信扫码,拉你入群

          最近更新
          更多文章>
          Theme by Vdoing | Copyright © 2021-2022 Variant Form
          • 跟随系统
          • 浅色模式
          • 深色模式
          • 阅读模式