@koala-form/antd-plugin

Koala-Form Ant Design Vue插件

低代码表单解决方案，让你跟考拉一样“懒”

• 使用文档 - https://koala-form.mumblefe.cn/zh/ui/antd.html

Install

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

Usage

注册全局插件

import { componentPlugin } from '@koala-form/antd-plugin';
import { installPluginPreset, installInGlobal } from '@koala-form/core';

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

installInGlobal(componentPlugin)

写一个简单的表单

<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>

反馈