# alertmsgh5

> 轻量级的一个消息提示组件，纯JS编写，开箱即用

Latest version **1.0.0** (published 2023-03-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install alertmsgh5
pnpm add alertmsgh5
yarn add alertmsgh5
bun add alertmsgh5
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-03-06 |
| First published | 2023-03-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 33 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | XCC |
| Maintainers | xcc__ |
| Keywords | alert, confirm, notification, 轻量级, 无视图依赖, 开箱即用 |

## Links

- npm: https://www.npmjs.com/package/alertmsgh5
- Repository: https://github.com/sirxue66/AlertMsgH5/tree/main/src
- Homepage: https://sirxue66.github.io/AlertMsgH5/
- npm.io page: https://npm.io/package/alertmsgh5

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2023-03-06

## README

# 欢迎使用AlertMsgH5

***AlertMsgH5是一套轻量级的消息提示组件库，不依赖任何视图框架，纯js编写，开箱即用***
***项目依赖浏览器，不可脱离window环境，因为组件都是直接挂载到window上边的，一处挂载，全局使用***
***本组件适合于一些封装库、或者不需要大量使用UI却需要进行消息提示的项目使用***
***组件库 提供alert消息提示、confirm消息确认、notification通知提示三种组件***
***原生开发请前往[仓库](https://github.com/sirxue66/AlertMsgH5)使用打包后的文件，npm下载使用，请确保您的项目使用了css-loader和style-loader来处理css，***
***

[在线预览](https://sirxue66.github.io/AlertMsgH5/)

[git仓库](https://github.com/sirxue66/AlertMsgH5/tree/main/src)
[gitee仓库](https://gitee.com/post-man/alert-msg-h5/tree/main/src)

### Alert
***分开传参***

| 方法  | 参数 |
| ------------- | ------------- |
| info  | content: string -->提示内容 <br>delay: number -->关闭延迟，默认3秒  |
|success | content: string -->提示内容 <br>delay: number -->关闭延迟，默认3秒 |
|warning | content: string -->提示内容 <br>delay: number -->关闭延迟，默认3秒 |
|error |content: string -->提示内容 <br>delay: number -->关闭延迟，默认3秒   |
|plian | content: string -->提示内容 <br>delay: number -->关闭延迟，默认3秒  |

**示例**
```javascript
import { creatMSG } from "alertmsgh5"
creatMSG("$ALERTMSG")  //挂载组件到window上(默认传参“$ALERTMSG")
console.log(window)
const {info, success, warning, error, plain} = $ALERTMSG.alert
info("消息提示", 3000)
success("成功提示", 3000)

```

### Notification
***对象传参***

| 方法  | 参数 |
| ------------- | ------------- |
| info  | title: string -->标题 <br> content: string -->提示内容 <br>delay: number -->关闭延迟，默认3秒|
|success | title: string -->标题 <br> content: string -->提示内容 <br>delay: number -->关闭延迟，默认3秒|
|warning | title: string -->标题 <br> content: string -->提示内容 <br>delay: number -->关闭延迟，默认3秒|
|error | title: string -->标题 <br> content: string -->提示内容 <br>delay: number -->关闭延迟，默认3秒 |
|plian | title: string -->标题 <br> content: string -->提示内容 <br>delay: number -->关闭延迟，默认3秒  |

**示例**
```javascript
import { creatMSG } from "alertmsgh5"
creatMSG("$ALERTMSG")  //挂载组件到window上(默认传参“$ALERTMSG")

const {info, success, warning, error, plain} = $ALERTMSG.notification
info({
	title: "系统提示",
	content: "这是系统提示",
	delay: 3000
})
success({
	title: "系统提示",
	content: "这是成功提示",
	delay: 3000
})

```

### Confirm
***对象传参***

| 方法  | 参数 |
| ------------- | ------------- |
| open  | mask: boolean -->是否打开遮罩<br> content: string -->提示内容,支持html字符串 <br>btnOK: string -->确认按钮文字<br>btnCancel: string -->取消按钮文字<br>OKFun: function -->确定的回调<br>CancelFun: function -->取消的回调 |

**示例**
```javascript
import { creatMSG } from "alertmsgh5"
creatMSG("$ALERTMSG")  //挂载组件到window上(默认传参“$ALERTMSG")

const { open } = $ALERTMSG.confirm
open({
	mask: true,
	content: "确定继续进行吗？",
	btnOK: "确定",
	btnCancel: "取消",
	OKFun: () => {},
	CancelFun: () => {}
})

```

---
_Source: https://npm.io/package/alertmsgh5 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._