https://github.com/nihaojob/popular-message
轻量级的信息反馈组件
https://github.com/nihaojob/popular-message
notification notifications toast toastify
Last synced: 6 months ago
JSON representation
轻量级的信息反馈组件
- Host: GitHub
- URL: https://github.com/nihaojob/popular-message
- Owner: nihaojob
- License: mit
- Created: 2021-06-15T14:24:02.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-09-01T15:17:50.000Z (about 3 years ago)
- Last Synced: 2025-03-29T14:08:19.462Z (6 months ago)
- Topics: notification, notifications, toast, toastify
- Language: JavaScript
- Homepage: https://nihaojob.github.io/popular-message
- Size: 121 KB
- Stars: 278
- Watchers: 5
- Forks: 23
- Open Issues: 0
-
Metadata Files:
- Readme: README-zh.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
中文 | [English](https://github.com/nihaojob/popular-message/blob/main/README.md)
# popular-message
[](https://travis-ci.com/github/nihaojob/popular-message)
[](https://coveralls.io/github/nihaojob/popular-message)
[](https://github.com/nihaojob/popular-message/blob/main/LICENSE)
[](https://github.com/nihaojob/popular-message/releases)
轻量级的信息反馈组件，在顶部居中显示，并自动消失。有多种不同的提示状态可选择。
[体验Demo](https://nihaojob.github.io/popular-message)
## 特点
1. 与iview的$mesage组件的API保持一致。
2. 无任何依赖，非常轻量，200 行左右的源码，压缩后更小。
3. UI漂亮，参考iview UI样式。
## Install
1. 直接使用unpkg [在线链接](https://unpkg.com/browse/popular-message@1.0.0/index.js)
```HTML
```
2. 通过npm 或者 yarn安装
```bash
$ npm install popular-message
$ yarn add popular-message
```
## Use
通过 script 引用，会得到一个全局变量 `$message`。
通过npm安装，需要import导入
```js
import $message from 'popular-message';
import 'popular-message/index.css';
```
在页面中使用
```js
$message.config({ top:85, duration: 4})
$message.info('这是一条普通的提示')
$message.success('这是一条成功的提示')
$message.warning('这是一条警告的提示')
$message.error('这是一条格式错误的提示')
$message.loading('正在加载中...')
$message.info('这是一条带关闭按钮的消息', {
onClose:() => console.log('关闭'),
closable: true,
duration: 6
})
$message.destroy()
```
## API
### Message instance
通过直接调用以下方法来使用：
- `$message.info(config)`
- `$message.success(config)`
- `$message.warning(config)`
- `$message.error(config)`
- `$message.loading(config)`
参数 config 可以是字符串或对象，当为字符串时，直接显示内容，当为对象时，具体说明如下：
| 属性 | 说明 | 类型| 默认值|
|--- |--- |--- | --- |
| content | 提示内容 |String | -|
| duration | 自动关闭的延时，单位秒，不关闭可以写 0 |Number | 2|
| onClose | 关闭时的回调 |Function | -|
| closable | 是否显示关闭按钮 |Boolean | false|
另外提供了全局配置和全局销毁的方法：
- `$message.config(options)`
- `$message.destroy()`
```JS
$Message.config({
top: 50,
duration: 3
});
```
| 属性 | 说明 | 类型| 默认值|
|--- |--- |--- | --- |
| top | 提示组件距离顶端的距离，单位像素 |Number | 24|
| duration | 默认自动关闭的延时，单位秒 |Number | 1.5|
| singleton | 消息框单例模式 |Boolean | false|
| dangerUseHtml | 是否将 content属性作为 HTML 片段处理 |Boolean | false|
## License
Licensed under the MIT License.