一款强大、高颜值的低代码动态表单组件

简介

今天给大家推荐一款强大的低代码动态表单组件。

本系统通过数据驱动表单渲染，适配移动端，支持可视化设计。提高开发者对表单的开发效率。目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。

支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。

特点

• 使用JSON数据生成表单
• 支持扩展，生成任何Vue组件和HTML标签
• 支持6个UI框架
• 支持组件之间联动
• 提供丰富的表单操作API
• 支持子表单和分组
• 高性能
• 适配移动端

支持的UI框架

• element-plus
• ant-design-vue
• naive-ui
• arco-design
• tdesign
• vant

安装

本文将介绍如何安装并使用 @form-create/vant 组件库，包括在浏览器环境和通过 npm 安装的方法。

使用 npm 安装

通过 npm 安装可以更好地与现代构建工具（如 Webpack）集成。

npm install @form-create/vant@^3

引入和挂载

// 引入 form-create-vant 组件库
import formCreateMobile from '@form-create/vant';


// 在 Vue 应用中使用
const app = Vue.createApp({});
app.use(formCreateMobile);
app.mount('#app');

浏览器环境

在浏览器中你可以通过直接引入相关的 CDN 链接来进行安装。

<!-- 引入 Vant 的样式文件 -->
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"/>
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
<!-- 引入 formCreate -->
<script src="https://cdn.jsdelivr.net/npm/@form-create/vant/form-create.min.js"></script>
<!-- 初始化 Vue 应用并挂载组件 -->
<script>
    const app = Vue.createApp({});
    app.use(vant); // 使用 Vant 组件库
    app.use(formCreateMobile); // 使用 form-create-vant 组件
    app.mount('#app');
</script>

创建表单

<template>
    <!-- 使用 form-create-mobile 组件 -->
    <form-create-mobile :rule="rule" v-model:api="fApi" v-model="formData" :option="options"/>
</template>


<script setup>
    import { ref } from 'vue';
    import formCreateMobile from '@form-create/vant';
    const fApi = ref({});
    const formData = ref({});
    const options = {
        onSubmit: (formData) => {
            alert(JSON.stringify(formData)); // 提交表单时弹出表单数据
        },
        resetBtn: true // 显示重置按钮
    };
    const rule = ref([
        {
            type: 'input',
            field: 'goods_name',
            title: '商品名称',
            value: 'form-create'
        },
        {
            type: 'checkbox',
            field: 'label',
            title: '标签',
            value: [0, 1, 2, 3],
            options: [
                { label: '好用', value: 0 },
                { label: '快速', value: 1 },
                { label: '高效', value: 2 },
                { label: '全能', value: 3 }
            ]
        }
    ]);
</script>

图例