Nitrogenous Polymorphic Molecule

    @beisen-phoenix/modal
    TypeScript icon, indicating that this package has built-in type declarations

    3.3.55 • Public • Published

    @beisen-phoenix/modal

    模式弹层

    API

    参数 说明 类型 默认值
    visible 是否显示 boolean false
    hasMasker 是否显示遮罩层 boolean true
    maskerClosable 点击遮罩是否关闭 Modal boolean true
    escClosable 点击 ESC 键是否关闭 Modal boolean true
    hideDocsBodyScrollbar 是否在打开弹层时,隐藏 document.body 的滚动条 boolean false
    timeout 动画执行的最大时间 number 300
    title 标题 string / React.ReactNode -
    confirmText 确认按钮文字 string -
    cancelText 取消按钮文字 string -
    confirmLoading 确定按钮 loading 状态 boolean false
    footer 自定义底部按钮区域,若传 null 则不显示底部 React.ReactNode / null -
    translation 国际化,详情见下方 object -
    onClose 点击遮罩层或右上角叉叉或按下键盘 ESC 键的回调 function() -
    onConfirm 点击确定按钮的回调 function(event) -
    onCancel 点击取消按钮的回调 function(event) -
    afterOpen 打开之后的回调 function() -
    afterClose 关闭之后的回调 function() -
    hasHeader 是否显示头部 boolean true
    extraCls 自定义组件容器 class,一般用于覆盖组件默认样式使用 string -
    size 弹层大小 可选small large string small
    style 自定义弹层样式 object undefined
    lang 当前语言环境(zh_CN,en_US,zh_TW) string zh_CN

    translation

    translation: {
      confirmText: '确定',
      cancelText: '取消'
    }
    

    changelog

    2019-11-19

    新增 lang 属性,用于表示当前的语言环境,取值范围为“zh_CN,zh_TW,en_US”内部新增中文简体、英文、中文繁体语言包。

    2019-09-20 1、新增 height 参数,可以用来控制弹层的高度,内联样式。 2019-08-27 1、新增 hasHeader 参数,用于控制弹窗头部是否显示。 2、在 title 为空的时候不再控制同步是否显示 2019-08-09

    Modal.xxx()

    2019-06-27 新增 api | extraCls | 自定义组件容器 class,一般用于覆盖组件默认样式使用| string | 无| No | 2019-06-27 移除 api: top left

    | size | 弹层大小 可选small large | string | small |

    包括:

    • Modal.show
    • Modal.close

    以上均为一个函数,参数为 object,具体属性如下:

    参数 说明 类型 默认值 是否必传
    id modal 根节点 id string -
    hasMasker 是否显示遮罩层 boolean true
    maskerClosable 点击遮罩是否关闭 Modal boolean true
    escClosable 点击 ESC 键是否关闭 Modal boolean true
    hideDocsBodyScrollbar 是否在打开弹层时,隐藏 document.body 的滚动条 boolean false
    timeout 动画执行的最大时间 number 300
    title 标题,不传表示不显示标题 string / React.ReactNode -
    confirmText 确认按钮文字 string -
    cancelText 取消按钮文字 string -
    confirmLoading 确定按钮 loading 状态 boolean false
    footer 自定义底部按钮区域,若传 null 则不显示底部 React.ReactNode / null -
    translation 国际化,详情见上方 object -
    onClose 点击遮罩层或右上角叉叉或按下键盘 ESC 键、调用 Modal.close 的回调 function(event) -
    onConfirm 点击确定按钮的回调 function(event) -
    onCancel 点击取消按钮的回调 function(event) -
    afterOpen 打开之后的回调 function() -
    afterClose 关闭之后的回调 function() -

    返回值为一个 object,具体属性如下:

    • close : 一个用于关闭当前 dialog 的 function

    使用方法:

    const modal = Modal.show({ title: "这里是标题" });
    modal.close(); // 关闭当前对话框

    Keywords

    none

    Install

    npm i @beisen-phoenix/modal

    DownloadsWeekly Downloads

    183

    Version

    3.3.55

    License

    ISC

    Unpacked Size

    55.4 kB

    Total Files

    45

    Last publish

    Collaborators

    • beisencorp