at-pop-form

简介

基于 at 组件库 Balloon 和 Form 组件完成的一个浮窗表单组件

使用示例

萨波

import PopForm from '@txdfe/at-pop-form';

class Demo extends React.Component {

  onConfirm(data) {
    console.log(data)
    // { test1: value }
  }

  render() {
    return (
      <PopForm
        title="pop form title"
        trigger={ <button className='trigger button'>Trigger</button> }
        submitText="submit"
        onSubmit={ this.onConfirm }
        onChange={ this.onChange }
      >
        <PopForm.Item label='TEST'>
          <Input placeholder='test placeholder' name='test1' />
        </PopForm.Item>
      </PopForm>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);

API

PopForm

| 参数 | 类型 | 可选值 | 默认值 | 是否必填 | 说明 | | :--- | :--- | :--- | :--- | :--- | :--- | | title | String | 无 | 无 | 是 | 设置浮窗表单的标题 | | trigger | any | 无 | <span /> | 是 | 触发元素 | | headerClassName | String | 无 | 无 | 否 | 浮窗 header 部分 className | | headerStyle | String | 无 | 无 | 否 | 浮窗 header 部分 style | | icon | String ReactNode | 无 | 无 | 否 | 浮窗 header 左上角图标内容 | | children | any | 无 | 无 | 否 | 浮窗表单部分内容，建议使用 PopForm.Item 填充内容 | | visible | boolean | true | false | 无 | 否 | 控制当前浮窗表单时候显示 | | onSubmit | Function | 无 | 无 | 否 | 点击浮窗表单中确认按钮的回调函数，接收一个参数，为表单的值 | | onChange | Function | 无 | 无 | 否 | 表单变化回调 签名:Function(values: Object,item: Object) => void参数:values: {Object} 表单数据item: {Object} 详细item.name: {String} 变化的组件名item.value: {String} 变化的数据item.field: {Object} field 实例 | | footer | Boolean | ReactNode | true | false | true | 否 | 设置为 Boolean 值则控制 footer 是否显示 设置为 ReactNode 即可自定义 footer 的内容 | | value | Object | 无 | {} | 否 | 表单值 | | submitText | String | 无 | zh-cn: '确认'en: 'Confirm' | 否 | 确认按钮的文字内容 | | submitDisabled | Boolean | true | false | fasle | 否 | 控制确认按钮是否禁用 | | submitLoading | Boolean | true | false | false | 否 | 控制确认按钮是否 loading | | footerClassName | String | 无 | 无 | 否 | 浮窗 footer 部分 className | | footerStyle | String | 无 | 无 | 否 | 浮窗 footer 部分 style | | align | String | 't'(上) 'r'(右) 'b'(下) 'l'(左) 'tl'(上左) 'tr'(上右) 'bl'(下左) 'br'(下右) 'lt'(左上) 'lb'(左下) 'rt'(右上) 'rb'(右下 及其 两两组合) | 'b' | 否 | 浮窗弹出的位置 | | offset | Array | 无 | [0, 0] | 否 | 弹层相对于trigger的定位的微调 | | onClose | Function | 无 | 无 | 否 | 任何 visible 为 false 时会触发的事件 | | delay | Number | 无 | 无 | 否 | 弹层在触发以后的延时显示, 单位毫秒 ms | | afterClose | Function | 无 | 无 | 否 | 浮层关闭后触发的事件, 如果有动画，则在动画结束后触发 | | shouldUpdatePosition | Boolean | 无 | 无 | 否 | 强制更新定位信息 | | autoFocus | Boolean | true | false | true | 否 | 弹层出现后是否自动focus到内部第一个元素 | | safeNode | String | 无 | 无 | 否 | 安全节点:对于triggetType为click的浮层,会在点击除了浮层外的其它区域时关闭浮层.safeNode用于添加不触发关闭的节点, 值可以是dom节点的id或者是节点的dom对象 | | safeId | String | 无 | 无 | 否 | 用来指定safeNode节点的id，和safeNode配合使用 | | animation | Object | Boolean | 无 | {  in: 'zoomIn',  out: 'zoomOut'} | 否 | 配置动画的播放方式 | | cache | Boolean | 无 | false | 否 | 弹层的dom节点关闭时是否删除 | | popupContainer | String | Function | 无 | 无 | 否 | 指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数。 | | popupStyle | Object | 无 | 无 | 否 | 弹层组件 style，透传给 Popup | | popupClassName | String | 无 | 无 | 否 | 弹层组件 className，透传给 Popup | | popupProps | Object | 无 | {} | 否 | 弹层组件属性，透传给 Popup | | id | String | 无 | 无 | 否 | 弹层id, 传入值才会支持无障碍 | | language | String | 'zh-cn' | 'en' | 'zh-cn' | 否 | 语言选项 |

PopFormItem

同 Form.Item

PopFormSubmit

同 Form.Submit

PopFormReset

同 Form.Reset