分享一个前端消息提示组件库ToastifyJs
https://github.com/apvarun/toastify-js
引入：
npm install --save toastify-js
或者
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"> <script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
使用：
Toastify({ text: "This is a toast", duration: 3000 }).showToast();
复杂例子：
Toastify({ text: "This is a toast", duration: 3000, destination: "https://github.com/apvarun/toastify-js", newWindow: true, close: true, gravity: "top", // `top` or `bottom` position: "left", // `left`, `center` or `right` stopOnFocus: true, // Prevents dismissing of toast on hover style: { background: "linear-gradient(to right, #00b09b, #96c93d)", }, onClick: function(){} // Callback after click }).showToast();
完整api:
| Option Key | type | Usage | Defaults |
| text | string | Message to be displayed in the toast | “Hi there!” |
| node | ELEMENT_NODE | Provide a node to be mounted inside the toast. node takes higher precedence over text |
|
| duration | number | Duration for which the toast should be displayed. -1 for permanent toast |
3000 |
| selector | string | ELEMENT_NODE | ShadowRoot | CSS Selector or Element Node on which the toast should be added |
| destination | URL string | URL to which the browser should be navigated on click of the toast | |
| newWindow | boolean | Decides whether the destination should be opened in a new window or not |
false |
| close | boolean | To show the close icon or not | false |
| gravity | “top” or “bottom” | To show the toast from top or bottom | “top” |
| position | “left” or “right” | To show the toast on left or right | “right” |
| backgroundColor | CSS background value | To be deprecated, use style.background option instead. Sets the background color of the toast |
|
| avatar | URL string | Image/icon to be shown before text | |
| className | string | Ability to provide custom class name for further customization | |
| stopOnFocus | boolean | To stop timer when hovered over the toast (Only if duration is set) | true |
| callback | Function | Invoked when the toast is dismissed | |
| onClick | Function | Invoked when the toast is clicked | |
| offset | Object | Ability to add some offset to axis | |
| escapeMarkup | boolean | Toggle the default behavior of escaping HTML markup | true |
| style | object | Use the HTML DOM Style properties to add any style directly to toast | |
| ariaLive | string | Announce the toast to screen readers, see ARIA live regions - Accessibility | MDN for options | “polite” |
| oldestFirst | boolean | Set the order in which toasts are stacked in page | true |
