Koala Form中后台前端低代码表单-技术圈

Koala Form中后台前端低代码表单

联合创作 · 2023-09-19 17:38

Koala Form 是一个表单页面的低代码解决方案，以 Vue3 为基础，围绕中后台产品的表单场景进行抽象，帮助开发者进行配置化的开发。

对比于业内的其他产品的学习成本较高，需引多个包，包体积较大的痛点， Koala Form 提供了更强的 UI 库支持度、维护性和复用性，并且提供了极强的场景封装能力，使用和学习成本更低，降低开发的复杂度。

特性：

Low Code

减少你80%重复的工作量，提升你的生产效率

Easier

快速上手，提供常见的基础的场景，只要简单的配置即可完成CURD的表单页面

Flexible

提供插件扩展功能，如扩展UI库支持。

Install

npm i @koala-form/core
npm i @koala-form/fes-plugin

Usage

注册全局插件

import '@koala-form/fes-plugin';
import { installPluginPreset } from '@koala-form/core';

// 将依赖的插件安装到全局
installPluginPreset();

写一个简单的表单

<template>
    <KoalaRender :render="render"></KoalaRender>
</template>

<script>
import { KoalaRender, useForm, ComponentType } from '@koala-form/core';

export default {
    components: { KoalaRender },
    setup() {
        const { render } = useForm({
            fields: [
                {
                    name: 'name', // modelRef.value.name可以访问到值
                    label: '姓名', // 表单项的名称
                    defaultValue: '蒙奇·D·路飞', // 默认值
                    components: {
                        name: ComponentType.Input, // 表单组件是输入框
                    },
                },
            ],
        });
        return {
            render
        };
    },
};
</script>

编辑