Admin Pro

ModalForm - 浮层表单

ModalForm 和 DrawerForm 是 Form 的一个变体，表现与 Form 相同， 是 Form 于 Antd Modal 和 Antd Drawer 的结合。 本质上仍然是个表单，所以无法通过 footer 来自定义页脚。

  • 提供了 trigger 来减少 state 的使用，如果你需要使用 state 来控制，也可以使用 open(v-model) 来控制打开与关闭，也可以采用 open 和 close
  • ModalForm 和 DrawerForm 的 onFinish 与 Form 不同，是个 Promise，如果你正常返回 Promise 会自动为你设置按钮的加载效果

基本用法 ​

显示代码
jsx
import { defineComponent } from 'vue'
import { Button } from 'ant-design-vue'
import { ModalForm, Number, Text } from '@/components/form'

export default defineComponent({
    setup () {
        function onFinish (values) {
            console.log(values)
            return new Promise((resolve) => {
                setTimeout(() => {
                    resolve(true)
                }, 1000)
            })
        }

        return () => {
            return (
                <ModalForm
                    title={'浮层表单'}
                    grid={true}
                    width={512}
                    onFinish={onFinish}
                    v-slots={{
                        trigger: () => {
                            return <Button>新建表单</Button>
                        }
                    }}
                >
                    <Text
                        label={'文本'}
                        name={'text'}
                        colProps={{ span: 12 }}
                    />
                    <Number
                        label={'数字'}
                        name={'number'}
                        colProps={{ span: 12 }}
                    />
                </ModalForm>
            )
        }
    }
})

可控的 ​

显示代码
jsx
import { defineComponent, ref } from 'vue'
import { Button } from 'ant-design-vue'
import { DrawerForm, Number, Text } from '@/components/form'

export default defineComponent({
    setup () {
        const open = ref(false)

        function handleClick () {
            open.value = true
        }

        function onFinish (values) {
            console.log(values)
            return new Promise((resolve) => {
                setTimeout(() => {
                    resolve(true)
                }, 1000)
            })
        }

        return () => {
            return (
                <div>
                    <Button onClick={handleClick}>新建表单</Button>
                    <DrawerForm
                        v-model={[open.value, 'open']}
                        title={'抽屉表单'}
                        grid={true}
                        width={512}
                        onFinish={onFinish}
                    >
                        <Text
                            label={'文本'}
                            name={'text'}
                            colProps={{ span: 12 }}
                        />
                        <Number
                            label={'数字'}
                            name={'number'}
                            colProps={{ span: 12 }}
                        />
                    </DrawerForm>
                </div>
            )
        }
    }
})

API ​

属性 ​

属性说明类型默认值
layout布局模式'horizontal' | 'vertical' | 'inline''vertical'
open(v-model)对话框是否可见booleanfalse
title标题string-
width弹框宽度number512
maskClosable点击蒙层是否关闭booleantrue
destroyOnClose关闭时是否销毁内容booleantrue
extraPropsModal 和 Drawer 的 Propsobject-
trigger用于触发 Modal 打开的 dom，一般是 button() => VNode | Slot-
submitter提交按钮相关配置object-

事件 ​

事件名称说明回调参数
onOpen打开的回调function()
onCancel关闭的回调function()
onAfterClose关闭后的回调function()
onOpenChangeopen 变化的回调function(value)
onLoadingChangeloading 变化的回调function(value)

方法 ​

名称描述参数
getFormInstance获取 Form 实例() => object
open打开() => void
close关闭() => void