在前端开发中，我们需要经常对用户进行提示或者提供一些信息反馈。而这些信息提示需要美观，易读且易于定制化。本文将介绍一款优秀的 npm 包 mdtoast-service，它是一款基于 Material Design 样式的轻量级消息提示工具。
安装
在使用 mdtoast-service 前，我们需要先安装它。可以通过以下方式进行安装：
npm install mdtoast-service
需要注意的是，mdtoast-service 是依赖于 Material Design 的样式库的，因此我们需要在 HTML 中引入 Material Design 样式库。
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdtoast-service/dist/mdtoast-service.css">
基本使用
在安装好 mdtoast-service 并引入了 Material Design 样式库后，我们就可以开始使用它了。下面将介绍 mdtoast-service 的基本用法。
首先，我们需要在 JavaScript 中引入 mdtoast-service。
import mdToastService from 'mdtoast-service';
然后，我们可以使用 mdToastService.show() 来调用它，并传入提示消息。
mdToastService.show('Hello, World!');上述代码将会在浏览器的正中央显示一条提示信息“Hello, World!”，如下图所示。
提示信息在一定的时间后将自动消失。时间的长短可以通过在调用 mdToastService.show() 时传入的参数对象 options 来设置。
mdToastService.show('Hello, World!', { duration: 5000 });上述代码将会在浏览器的正中央显示一条提示信息“Hello, World!”并且保持 5 秒钟的时间，如下图所示。
在 options 对象中还可以设置其他属性，例如 position、action、target 等。这些属性的具体说明可以在 mdtoast-service 的文档中找到。
高级使用
除了上述基本用法外，mdtoast-service 还提供了一些适用于更复杂场景的用法。
自定义模板
如果我们希望定制化消息提示的样式和内容，可以编写自定义模板并使用 mdToastService.create() 方法来创建。
自定义模板可以使用 HTML 和 CSS，mdtoast-service 提供了一些内置的样式类和内置的变量供我们使用。
下面是一个自定义模板的示例，它包含一个图标、一个消息内容和一个操作按钮。
<div class="mdtoast-example">
<div class="mdtoast-example-icon"><i class="material-icons">check_circle</i></div>
<div class="mdtoast-example-content">{{message}}</div>
<div class="mdtoast-example-action"><a href="#">{{action}}</a></div>
</div>接着，我们可以使用 mdToastService.create() 方法来创建一个自定义模板的消息提示框。
-- -------------------- ---- -------
----- --- - -
---- ------------------------
---- ------------------------------- ---------------------------------------------
---- -------------------------------------------------
---- --------------------------------- -----------------------------
------
--
----- ---- - -
-------- ----- ------------
------- -------
--
----- ------- - -
--------- ------
--------- ---- ------
--
----- ----- - -------------------------- ----- ---------上述代码将会在页面左上角创建一个自定义模板的消息提示框，样式和内容与我们在模板中定义的相同。并且，这个提示框会在页面的左上角保留 10 秒钟的时间。
链式调用
mdtoast-service 还支持链式调用。通过链式调用，我们可以设置多种属性的值。
mdToastService.show('Hello, World!')
.duration(5000)
.position('bottom right')
.action({ text: 'OK', handler: () => console.log('clicked!') });生命周期钩子函数
mdtoast-service 还可以监听消息提示框的生命周期。通过使用生命周期钩子函数，我们可以在消息提示框的生命周期中添加一些自定义的逻辑。
const toast = mdToastService.show('Hello, World!')
.on('beforeOpen', () => console.log('beforeOpen'))
.on('open', () => console.log('open'))
.on('close', () => console.log('close'))
.on('dispose', () => console.log('dispose'));上述代码将会在不同的生命周期阶段输出不同的日志信息。这些生命周期钩子函数可以在 mdtoast-service 的文档中找到。
总结
本文介绍了一款轻量级的消息提示工具 mdtoast-service，它拥有良好的 Material Design 样式和丰富的功能和配置项，可以满足我们在前端开发中对消息提示的需求。
在使用 mdtoast-service 时，我们需要根据不同的场景选择不同的用法，包括基本使用、自定义模板、链式调用和生命周期钩子函数等。同时，由于其依赖于 Material Design 样式库，我们也需要在 HTML 中引入相应的样式库。
希望本文能够对大家了解和使用 mdtoast-service 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cbf81e8991b448da5a6