相信使用过代码块复制按钮的用户，对 Snackbar 并不陌生，其告知用户应用程序执行的结果。本文将举例说明如何使用 Snackbar，以满足用户对自定义交互的需要。
API#
| Function | Description |
|---|---|
show(body: String, duration: number = 2000) | body：消息正文、duration：显示时间，单位毫秒。 |
导出#
得益于 assets/main/js/custom.ts，我们可以自定义 JavaScript，这里我们将整个 Snackbar 导出为全局变量：
1import Snackbar from 'js/snackbar';
2
3// Show a message via JavaScript.
4Snackbar.show('a message with 3s duration from pure JavaScript', 3000)
5
6// Export the Snackbar as a global variable, so that you can send a message from a HTML.
7// Such as: <button onclick="Snackbar.show('message from a button')">Snackbar</button>.
8const _global = (window || global ) as any
9_global.Snackbar = Snackbar
使用#
接着我们就可以在 HTML 或 JavaScript 中进行调用：
1<button onclick="Snackbar.show('message from a button')">Snackbar</button>
参阅钩子以了解如何注入自定义 HTML。
评论