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>

编辑分享