SulaJS

# ModalForm 弹窗表单

# install

tnpm i -S @sula/modalform

# usage

import ModalForm from "@sula/modalform";
// 1. 静态API调用，不建议使用，ModalForm中的组件无法国际化
const { showModalForm } = ModalForm;
showModalForm(config); // config Api如下

// 2. 推荐使用
<ModalForm ref={modalFormRef} />
// 静态API调用参数一致
modalFormRef.current.showModalForm(options);

# API

# formProps

表单配置，详细配置请查看sula-form

注意

不要设置ref，modalform将会在内部对form ref进行管理。

# mode

  • 类型:'create' | 'view' | 'edit'
  • 默认值:'create'

表单模式配置，未配置该属性时，默认为formProps内部mode配置，详细配置请查看sula-form

# props

Modal组件的配置，详细配置请查看Modal

# plugins

  • 类型: Array<Plugin>
  • 默认值: -

业务插件，透传给内部的<FormAction />组件

# footerRender

自定义Modal底部按钮配置，会透传给内部的<FormAction />组件，详细配置请查看FormAction footerRender

使用 tips：

  • 不配置footerRender属性时会启用默认的底部按钮
  • 默认底部左侧按钮，点击触发关闭弹框操作，弹框内表单所设置的mode属性为view时按钮文案为Back，其余为Cancel
  • 默认底部右侧按钮，用于表单的提交更新，弹框内表单所设置的mode属性为create时按钮文案为Submit，其余为Update，需配合submit属性使用

# submit

点击弹框Submit按钮时，提交表单数据的请求配置，配置方式同Create-Form Submit

使用 tips：

  • 只有当启用组件默认footerRender时，该属性配置生效，应用于底部右侧Submit ｜ Update按钮点击行为
  • 不配置submit属性并启用默认footerRender时，默认底部右侧按钮文案为OK，配合onOK属性使用

# onOK

  • 类型：(values) => void
  • 默认值：-

默认底部右侧按钮展示为OK时，在用户点击该按钮时，将表单当前值收集并传入该方法，并关闭弹窗

使用 tips：

  • 不配置onOK时，点击OK按钮，直接关闭弹窗
  • 使用前提：不配置submit、footerRender属性

# 实例方法

注意

  • 配置方法action的参数中可以拿到form、modal的实例方法，form的实例方法请查看Sula-Form实例方法，以下为modal实例方法
  • modal关闭后，无法获得form实例

# close()

{
  type: 'button',
  text: 'Close',
  action: (ctx) => {
    ctx.modal.close();
  }
}

关闭弹框

# showLoading()

{
  type: 'button',
  text: 'Show Loading',
  action: (ctx) => {
    ctx.modal.showLoading();
  }
}

显示弹框loading动画

# hideLoading()

{
  type: 'button',
  text: 'Hide Loading',
  action: (ctx) => {
    ctx.modal.hideLoading();
  }
}

关闭弹框loading动画

# ctx

sula内所有配置属性，均支持配置方法，ctx为该方法的第一个参数，配置给不同属性时，ctx内容会有差异

示例：

{
  type: 'button',
  text: 'Button',
  action: (ctx) => {
    const values = ctx.form.getFieldsValue();
    console.log(values);
    ctx.modal.close();
  }
}

# form

  • 类型: object

form实例，请查看form示例方法

  • 类型: object

modal实例，请查看modal实例方法

# table

  • 类型: object

table实例，请查看table实例方法

Last Updated: 2020/3/3 上午10:14:37

← FormAction 表单行为 →