vform-uniapp

基于 VForm 的 UniApp 表单组件，帮助快速实现移动端表单渲染功能。

安装

npm install vform-uniapp --save

使用方法

全局注册

// main.js
import Vue from "vue";
import VFormUniapp from "vform-uniapp";

// 引入样式
import "vform-mobile-builds/dist/VmFormRender.css";

Vue.use(VFormUniapp);

组件中使用

<template>
  <div>
    <v-form-render
      :form-json="formJson"
      :form-data="formData"
      :option-data="optionData"
      ref="vFormRef"
    >
    </v-form-render>
    <button type="primary" @click="submitForm">提交表单</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formJson: {}, // 表单设计器导出的JSON
      formData: {}, // 表单数据
      optionData: {}, // 选项数据
    };
  },
  methods: {
    submitForm() {
      this.$refs.vFormRef
        .getFormData()
        .then((formData) => {
          console.log("表单数据：", formData);
        })
        .catch((error) => {
          console.error("表单验证失败：", error);
        });
    },
  },
};
</script>

属性

| 属性 | 描述 | 类型 | 默认值 | | ----------- | -------------- | ------ | ------ | | form-json | 表单 JSON 配置 | Object | {} | | form-data | 表单数据 | Object | {} | | option-data | 选项数据 | Object | {} |

方法

| 方法名 | 描述 | 参数 | | ----------- | ---------------------------- | ---- | | getFormData | 获取表单数据，会进行表单验证 | - |

依赖

• Vue 2.6+
• vform-mobile-builds 2.0+

许可证

MIT

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Customize configuration

See Configuration Reference.