表单的事件

在使用 FormCreate 生成表单时，了解如何处理各种事件是构建动态表单的重要步骤。本节将详细介绍如何通过组件和 fApi 监听和处理表单事件，确保你能灵活控制表单的交互行为。

监听表单事件

FormCreate 提供了两种方式来监听表单事件：通过组件直接监听和通过 fApi 监听。

组件监听方式

你可以在模板中直接使用 v-on 或简写的 @ 语法来监听事件。

<form-create @change="onChange"></form-create>

fApi 监听方式

你也可以通过 fApi 对象来监听事件，这种方式更适合在逻辑层面集中管理事件处理。

fApi.on('change',this.onChange);

事件类型

事件名	类型	触发时机
change	(field: string, value: any, rule: Rule, api: Api, setFlag: boolean) => void	表单字段值变化时触发（用户输入或代码调用 api.setValue）。setFlag=true 表示由代码触发。
created	(api: Api) => void	表单实例创建完成，但未渲染 DOM。
mounted	(api: Api) => void	表单首次渲染完成（DOM 挂载后）。
reload	(api: Api) => void	调用 api.reload() 方法重载表单后。
beforeSubmit	(api: Api) => void	表单提交前置事件。
submit	(formData: Object, api: Api) => void	点击提交按钮或调用 api.submit()。
remove-field	(field: string, rule: Rule, api: Api) => void	调用 api.removeField(field) 移除字段时。
remove-rule	(rule: Rule, api: Api) => void	调用 api.removeRule(rule) 移除规则时。
repeat-field	(rule: Rule, api: Api) => void	添加规则时检测到 field 重复。
emit-event	(emitName: string, ...args: any[]) => void	组件内触发 emit 事件（如自定义组件的 @change）。
control	(rule: Rule, api: Api) => void	规则中 control 属性控制的显示/隐藏状态变化时。

示例

提交表单事件

通过 submit 事件监听表单提交事件

<template>
    <div>
        <form-create :rule="rule" @submit="handleSubmit"/>
    </div>
</template>
<script setup>
    import {ref} from 'vue';
    function handleSubmit(formData) {
        //todo 提交表单
    }
    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},
            ]
        },
        {
            type: 'el-button',
            title: '自定义按钮',
            native: false,
            on: {
                click() {
                    alert('点击了按钮')
                }
            },
            children: ['按钮']
        },
    ]);
</script>

表单创建完成事件

通过 mounted 事件监听表单创建完成事件

<template>
    <div>
        <form-create :rule="rule" @mounted="handleMounted"/>
    </div>
</template>
<script setup>
    import {ref} from 'vue';
    function handleMounted(api) {
        api.disabled(true, ['goods_name'])
    }
    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},
            ]
        },
        {
            type: 'el-button',
            title: '自定义按钮',
            native: false,
            on: {
                click() {
                    alert('点击了按钮')
                }
            },
            children: ['按钮']
        },
    ]);
</script>