Koala Form中后臺前端低代碼表單
Koala Form 是一個表單頁面的低代碼解決方案，以 Vue3 為基礎(chǔ)，圍繞中后臺產(chǎn)品的表單場景進(jìn)行抽象，幫助開發(fā)者進(jìn)行配置化的開發(fā)。
對比于業(yè)內(nèi)的其他產(chǎn)品的學(xué)習(xí)成本較高，需引多個包，包體積較大的痛點， Koala Form 提供了更強的 UI 庫支持度、 維護(hù)性和復(fù)用性， 并且提供了極強的場景封裝能力，使用和學(xué)習(xí)成本更低，降低開發(fā)的復(fù)雜度。
特性：
Low Code
減少你80%重復(fù)的工作量，提升你的生產(chǎn)效率
Easier
快速上手，提供常見的基礎(chǔ)的場景，只要簡單的配置即可完成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·路飛', // 默認(rèn)值 components: { name: ComponentType.Input, // 表單組件是輸入框 }, }, ], }); return { render }; }, }; </script>
評論
圖片
表情