# xy-messagebox > 基于React的弹出框组件 Latest version **0.2.0** (published 2019-12-30) · MIT license · 0 weekly downloads ## Install ```sh npm install xy-messagebox pnpm add xy-messagebox yarn add xy-messagebox bun add xy-messagebox ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.2.0 | | Published | 2019-12-30 | | First published | 2019-04-20 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 8 | | Unpacked size | 49.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | XueYou | | Maintainers | xueyou2000 | | Keywords | react, react-component, xy-messagebox | ## Links - npm: https://www.npmjs.com/package/xy-messagebox - Repository: https://github.com/xueyou2000/xy-messagebox - Homepage: https://github.com/xueyou2000/xy-messagebox#readme - Issues: https://github.com/xueyou2000/xy-messagebox/issues - npm.io page: https://npm.io/package/xy-messagebox ## Dependencies (8) - [react](https://npm.io/package/react.md) ^16.12.0 - [react-dom](https://npm.io/package/react-dom.md) ^16.12.0 - [xy-button](https://npm.io/package/xy-button.md) ^1.0.2 - [classnames](https://npm.io/package/classnames.md) ^2.2.6 - [utils-hooks](https://npm.io/package/utils-hooks.md) ^0.0.71 - [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^0.1.4 - [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^1.2.22 - [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^5.10.2 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.2.0 (latest) — 2019-12-30 - 0.1.0 — 2019-11-19 - 0.0.93 — 2019-09-04 - 0.0.92 — 2019-09-04 - 0.0.91 — 2019-09-04 - 0.0.9 — 2019-05-12 - 0.0.8 — 2019-05-09 - 0.0.7 — 2019-05-05 - 0.0.6 — 2019-04-30 - 0.0.52 — 2019-04-29 - 0.0.51 — 2019-04-29 - 0.0.5 — 2019-04-26 - 0.0.4 — 2019-04-21 - 0.0.3 — 2019-04-21 - 0.0.2 — 2019-04-20 ## README | ![IE](https://github.com/alrra/browser-logos/blob/master/src/edge/edge_48x48.png?raw=true) | ![Chrome](https://github.com/alrra/browser-logos/blob/master/src/chrome/chrome_48x48.png?raw=true) | ![Firefox](https://github.com/alrra/browser-logos/blob/master/src/firefox/firefox_48x48.png?raw=true) | ![Opera](https://github.com/alrra/browser-logos/blob/master/src/opera/opera_48x48.png?raw=true) | ![Safari](https://github.com/alrra/browser-logos/blob/master/src/safari/safari_48x48.png?raw=true) | | ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | | IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ | ![NPM version](http://img.shields.io/npm/v/xy-messagebox.svg?style=flat-square) ![node version](https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square) ![npm download](https://img.shields.io/npm/dm/xy-messagebox.svg?style=flat-square) [![xy-messagebox](https://nodei.co/npm/xy-messagebox.png)](https://npmjs.org/package/xy-messagebox) # xy-messagebox 消息框组件, 弹出提示框，确认框，输入框。 ## 安装 ```bash # yarn yarn add xy-messagebox ``` ## 使用例子 ```tsx import React from "react"; import ReactDOM from "react-dom"; import { MessageBox, Alert, Confirm, Prompt, MessageBoxLocal, MessageBoxPopup } from "xy-messagebox"; ReactDOM.render(, container); ``` js 调用 ```tsx var close = MessageBoxPopup.Alert({ title: "提示", message: (

这是提示 close()}>关闭

), 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 | 无 | ## 开发 ```sh yarn run start ``` ## 例子 http://localhost:6006 ## 测试 ``` yarn run test ``` ## 开源许可 xy-messagebox is released under the MIT license. --- _Source: https://npm.io/package/xy-messagebox · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._