Xy-messagebox NPM


IE 10+ ✔	Chrome 31.0+ ✔	Firefox 31.0+ ✔	Opera 30.0+ ✔	Safari 7.0+ ✔

NPM version npm download

xy-messagebox

消息框组件, 弹出提示框，确认框，输入框。

安装

# yarn
yarn add xy-messagebox

使用例子

import React from "react";
import ReactDOM from "react-dom";
import { MessageBox, Alert, Confirm, Prompt, MessageBoxLocal, MessageBoxPopup } from "xy-messagebox";
ReactDOM.render(<Alert title="警告" message="确定退出系统吗?" />, container);

js 调用

var close = MessageBoxPopup.Alert({
    title: "提示",
    message: (
        <p>
            这是提示 <a onClick={() => close()}>关闭</a>
        </p>
    ),
    onClose: () => {
        console.log("关闭了");
    },
});

API

MessageBox

属性	说明	类型	默认值
visible	是否显示	boolean	false
defaultVisible	否默认显示	boolean	false
initialFocus	对话框打开焦点元素选择器	boolean	无
getContainer	返回一个容器来装载抽屉	HTMLElement/() => HTMLElement	无
children	对话框内容	React.ReactNode	无
fixed	是否固定	boolean	true
showMask	是否显示蒙层	boolean	true
maskClose	蒙层是否可关闭对话框	boolean	true
closeOnPressEsc	是否 ESC 关闭	boolean	true
onChange	对话框可视改变事件	(visible: boolean) => void	无
onKeyDown	键盘按下事件	(event: React.KeyboardEvent) => void	无
onUnmount	对话框关闭动画结束	Function	无
onClose	关闭事件	Function	无
getCloseFunc	获取关闭函数	(close: Function) => void	无

Alert

属性	说明	类型	默认值
title	标题	React.ReactNode	无
message	内容	React.ReactNode	无
type	图标类型	"info"/"success"/"error"/"warning"/IconDefinition	"info"
confirmText	确定按钮文本	string	无
footer	自定义页脚按钮	React.ReactNode	无

Confirm

属性	说明	类型	默认值
title	标题	React.ReactNode	无
message	内容	React.ReactNode	无
confirmText	确定按钮文本	React.ReactNode	无
cancelText	取消文本	React.ReactNode	无
onConfirm	确定事件	() => Promise	无
onCancel	取消事件	Function	无

Prompt

属性	说明	类型	默认值
title	标题	React.ReactNode	无
message	内容	React.ReactNode	无
confirmText	确定按钮文本	React.ReactNode	无
cancelText	取消文本	React.ReactNode	无
onConfirm	确定事件	(value: strin) => Promise	无
onCancel	取消事件	Function	无
defaultValue	默认内容	string	无
placeholder	占位符文本	string	无
valid	验证函数, 验证成功返回 true, 严重失败返回失败原因字符串	(val: string) => boolean	string	无