message.js - 一个小巧实用的 JavaScript 提示信息工具库!
- 原生 JavaScript 编写;
- 支持 UMD 规范;
- 提供功能独立的 ES6 模块代码;
- 配置丰富且灵活,调用简单;
- 体积小;
Edge |
Firefox |
Chrome |
Safari |
Opera |
---|---|---|---|---|
Edge | last 10 versions | last 10 versions | last 10 versions | last 10 versions |
message.js 提供多种安装方式的支持: npm 安装、加载 CDN 资源、以及本地资源调用。
npm i @yaohaixiao/message.js
<link href="https://cdn.jsdelivr.net/gh/yaohaixiao/message.js/message.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/gh/yaohaixiao/message.js/message.min.js"></script>
<link href="path/to/message.min.css" rel="stylesheet" /></script>
<script src="path/to/message.min.js"></script>
message.js 调用起来十分便捷,配置信息也十分丰富。
// 导入 Message 模块
import Message from '@yaohaixiao/message.js/message'
// 使用静态方法
Message.info({
duration: 5,
message: 'message.js - 一个小巧实用的 JavaScript 提示信息工具库。'
})
Message.success({
round: true,
message: 'message.js - 一个小巧实用的 JavaScript 提示信息工具库。'
})
Message.warning({
effect: 'light',
message: 'message.js - 一个小巧实用的 JavaScript 提示信息工具库。'
})
Message.error({
effect: 'plain',
message: 'message.js - 一个小巧实用的 JavaScript 提示信息工具库。'
})
// 使用 Message 对象创建实例
// 详细 options 配置,请查看 API 文档中的说明
new Message({
id: 'info-001',
type: 'info',
effect: 'default',
round: false,
offset: 30,
duration: 6,
delay: 2,
message: '<a href="https://github.com/yaohaixiao/message.js">message.js</a> - 一个小巧实用的 JavaScript 提示信息工具库。',
customClass: '',
closable: true,
visible: true,
dangerouslyUseHTMLString: false,
destroyAfterClosed: true,
beforeClose: null
})
API 文档地址:https://yaohaixiao.github.io/message.js
Licensed under MIT License.