FormDialog

弹窗表单，主要用在简单的事件打开表单场景

注意

该组件经过重构，完全摒弃了通过id传递上下文的方式，使用时请注意函数入参的改动。现在通过Vue中JSX的插槽写法实现类似的功能。

提示

使用函数式组件时可以通过解构的方式快速拿到form,具体请参考template案例。

Markup Schema 案例

JSON Schema 案例

vue

<script setup lang="tsx">
import { createSchemaField } from '@formily/vue'
import { FormDialog, FormItem, FormLayout, Input } from '@silver-formily/element-plus'
import { ElButton } from 'element-plus'

const { SchemaField } = createSchemaField({
  components: {
    FormItem,
    Input,
  },
})

// 弹框表单组件
const DialogForm = {
  data() {
    const schema = {
      type: 'object',
      properties: {
        aaa: {
          'type': 'string',
          'title': '输入框1',
          'required': true,
          'x-decorator': 'FormItem',
          'x-component': 'Input',
        },
        bbb: {
          'type': 'string',
          'title': '输入框2',
          'required': true,
          'x-decorator': 'FormItem',
          'x-component': 'Input',
        },
        ccc: {
          'type': 'string',
          'title': '输入框3',
          'required': true,
          'x-decorator': 'FormItem',
          'x-component': 'Input',
        },
        ddd: {
          'type': 'string',
          'title': '输入框4',
          'required': true,
          'x-decorator': 'FormItem',
          'x-component': 'Input',
        },
      },
    }
    return {
      schema,
    }
  },
  render() {
    return (
      <FormLayout labelCol={6} wrapperCol={10}>
        <SchemaField schema={this.schema} />
      </FormLayout>
    )
  },
}

function handleOpen() {
  FormDialog('弹框表单', DialogForm)
    .forOpen((payload, next) => {
      setTimeout(() => {
        next({
          initialValues: {
            aaa: '123',
          },
        })
      }, 1000)
    })
    .forConfirm((payload, next) => {
      setTimeout(() => {
        console.log(payload)
        next(payload)
      }, 1000)
    })
    .forCancel((payload, next) => {
      setTimeout(() => {
        console.log(payload)
        next(payload)
      }, 1000)
    })
    .open()
    .then(console.log)
    .catch(console.error)
}
</script>

<template>
  <ElButton @click="handleOpen">
    点击打开表单
  </ElButton>
</template>

Template 案例

Template 插槽案例

vue

<script setup lang="tsx">
import { Field } from '@formily/vue'
import { FormDialog, FormItem, FormLayout, Input } from '@silver-formily/element-plus'
import { ElButton } from 'element-plus'

function handleOpen() {
  FormDialog('弹框表单', {
    header: ({ reject }) => (
      <div>
        <ElButton onClick={() => reject()}>关闭</ElButton>
        <span>这是标题</span>
      </div>

    ),
    default: () => (
      <FormLayout labelCol={6} wrapperCol={10}>
        <Field
          name="aaa"
          required
          title="输入框1"
          decorator={[FormItem]}
          component={[Input]}
        />
        <Field
          name="bbb"
          required
          title="输入框2"
          decorator={[FormItem]}
          component={[Input]}
        />
        <Field
          name="ccc"
          required
          title="输入框3"
          decorator={[FormItem]}
          component={[Input]}
        />
        <Field
          name="ddd"
          required
          title="输入框4"
          decorator={[FormItem]}
          component={[Input]}
        />
      </FormLayout>
    ),
    footer: ({ form, resolve, reject }) => {
      return [
        <ElButton
          onClick={() => reject()}
        >
          取消
        </ElButton>,
        <ElButton loading={form.submitting} onClick={() => resolve('extra')}>extra</ElButton>,
        <ElButton loading={form.submitting} onClick={() => resolve('saveDraft')}>保存草稿</ElButton>,
        <ElButton
          type="primary"
          loading={form.submitting}
          onClick={() => resolve()}
        >
          确定
        </ElButton>,
      ]
    },
  }, ['extra', 'saveDraft'])
    .forOpen((payload, next) => {
      next({
        initialValues: {
          aaa: '123',
        },
      })
    })
    .forConfirm((payload, next) => {
      setTimeout(() => {
        next(payload)
      }, 1000)
    })
    .forExtra((payload, next) => {
      setTimeout(() => {
        console.log('extra')
        next(payload)
      }, 1000)
    })
    .forSaveDraft((payload, next) => {
      setTimeout(() => {
        console.log('saveDraft')
        next(payload)
      }, 1000)
    })
    .forCancel((payload, next) => {
      setTimeout(() => {
        next(payload)
      }, 1000)
    })
    .open()
    .then(console.log)
    .catch(console.error)
}
</script>

<template>
  <ElButton @click="handleOpen">
    点击打开表单
  </ElButton>
</template>

API

FormDialog 函数入参

参数	说明	类型
`title`或`formDialogProps`	标题或Dialog组件的props	`string` `FormDialogProps`
`formDialogSlots`	表单弹窗组件的内容，支持组件，VNode和插槽的写法	`Component` `VNode[]` `()=>VNode[]` `FormDialogSlots`
`dynamicMiddlewareNames`	动态中间件名称列表，使用时会转成Camel Case命名风格。	`string[]`除了`cancel` `confirm` `open`

注意

formDialogProps是有保留值的。传入modelValue、onUpdate:modelValue不会生效，已被FormDialog组件内部使用。

完整函数类型声明（参数的具体类型参见类型声明）：

interface FormDialog {
  (
    title: IFormDrawerProps | string,
    content?: Component | FormDrawerSlotContent,
    dynamicMiddlewareNames?: string[]
  ): IFormDialog
}

title

函数的第一个参数，传入字符串时会作为标题显示。可以传入IFormDialogProps来进行自定义。请优先使用forOpen、forConfirm、forCancel等中间件来控制弹框的生命周期。

参数	说明	类型	默认值
`cancelText`	取消按钮文字	`string`	`取消`
`cancelButtonProps`	取消按钮的props	`ButtonProps`	-
`okText`	确定按钮文字	`string`	`确定`
`okButtonProps`	确定按钮的props	`ButtonProps`	-
`loadingText`	加载中文字	`string`	`loading`

其余参数请参考参考 https://cn.element-plus.org/zh-CN/component/dialog.html

content

函数的第二个参数，除了可以传入组件和VNode之外还可以接受Vue中JSX的插槽写法自定义header与footer。

插槽名	说明	类型
`default`	表单弹窗组件的内容，支持组件，VNode和插槽的写法	-
`header`	头部插槽，可以通过作用域插槽调用resolve或reject来关闭，resovle可以接受`dynamicMiddlewareNames`中传入的字符串	`FormDialogSlotProps`
`footer`	底部插槽，可以通过作用域插槽调用resolve或reject来关闭，resovle可以接受`dynamicMiddlewareNames`中传入的字符串	`FormDialogSlotProps`

dynamicMiddlewareNames

函数的第三个参数，是一个字符串数组，用于触发自定义footer或header中的按钮事件。

比如需要在弹框中额外添加保存草稿的功能，那么就可以在dynamicMiddlewareNames中传入'saveDraft'，然后在footer中的按钮上绑定事件resolve('saveDraft')。最后在可以像forConfirm一样添加forSaveDraft的相关逻辑。具体使用可以参考Demo中的例子。

提示

传入dynamicMiddlewareNames中的字符串会被转成Camel Case命名风格，比如'save-draft'会被转成'saveDraft'。

IFormDialog 函数返回

函数的返回值，是一个是一个Promise对象，因此可以进行await操作来优化逻辑书写，需要调用open方法来打开弹框。可以进行链式调用来处理不同逻辑下的事件处理。现在支持通过dynamicMiddlewareNames来传入自定义的事件来处理业务逻辑。

方法名	说明	类型
`open`	打开弹框	`(IFormProps)=>Promise<IFormProps.values>`
`forOpen`	打开弹框事件	`(IMiddleware<IFormProps>)=>IFormDialog`
`forConfirm`	确认事件	`(IMiddleware<IFormProps>)=>IFormDialog`
`forCancel`	取消事件	`(IMiddleware<IFormProps>)=>IFormDialog`
`for${Dynamic}`	自定义事件	`(IMiddleware<IFormProps>)=>IFormDialog`

提示

自定义事件中的Dynamic的值为dynamicMiddlewareNames中传入的字符串，通过作用域插槽中的resolve方法来触发对应的事件。传入dynamicMiddlewareNames中的字符串在调用方法时会被转成Pascal Case命名风格，比如传入['save-draft']应该调用'forSaveDraft'。

提示

现在所有通过非resolve调用关闭的弹框都会作为错误抛出，因此在async/await写法中如果await了FormDialog则此之后的逻辑都只在表单成功提交后才会执行。

类型声明

IFormDialogProps

export type IFormDialogProps = Partial<DialogProps> & {
  cancelText?: string
  cancelButtonProps?: ButtonProps
  okText?: string
  okButtonProps?: ButtonProps
  loadingText?: string
}

FormDialogSlots

export interface FormDialogSlotProps {
  resolve: (type?: string) => void
  reject: () => void
  form: Form
}

export interface FormDialogSlots {
  header?: (props: FormDialogSlotProps) => VNode
  default?: () => VNode
  footer?: (props: FormDialogSlotProps) => VNode
}

IFormDialog

export interface IFormDialog {
  forOpen: (middleware: IMiddleware<IFormProps>) => IFormDialog
  forConfirm: (middleware: IMiddleware<IFormProps>) => IFormDialog
  forCancel: (middleware: IMiddleware<IFormProps>) => IFormDialog
  [key: `for${string}`]: (middleware: IMiddleware<IFormProps>) => IFormDialog
  open: (props?: IFormProps) => Promise<any>
  close: () => void
}

FormDialog ​

Markup Schema 案例 ​

JSON Schema 案例 ​

Template 案例 ​

Template 插槽案例 ​

API ​

FormDialog 函数入参 ​

title ​

content ​

dynamicMiddlewareNames ​

IFormDialog 函数返回 ​

类型声明 ​

IFormDialogProps ​

FormDialogSlots ​

IFormDialog ​