在前端开发中，弹窗提示消息是一个必不可少的功能。而 npm 包 flash-toast 就提供了一种简单易用的方式来实现弹窗提示消息功能。 flash-toast 的优势在于可以免去繁琐的样式和交互代码，同时具备良好的兼容性和扩展性。
安装
使用 npm 安装 flash-toast 包：
--- ------- ----------- ------
安装完成后，在需要使用的文件中引入：
------ ---------- ---- --------------
快速使用
flash-toast 支持三种消息提示类型：普通成功提示、普通失败提示和带图片的消息提示。在较为简单的页面中，你可能只需要使用其中的一种提示类型。为了方便使用，flash-toast 提供了快捷方法：
--------------------------- ------------------------- ------------------------ --------
注意，该方法只是一个针对简单场景的快捷方式，具体使用时，需要根据实际情况选择使用普通或带图片的消息提示。
消息提示类型
普通消息提示
普通的成功和错误提示使用相同的方法，只是调用的方法名不同。例如，如果你需要显示一条成功提示消息，可以使用以下代码：
---------------------------- -----------
消息提示会在页面顶部居中显示，使用绿色背景色表示成功，红色背景色表示错误。
带图片的消息提示
如果你需要使用更具特色的提示信息，可以使用带有图片的消息提示。该方法需要传入两个参数：图片地址和提示文本。例如：
------------------------------------------------- ------------
提示信息会在页面中央居中显示，图片会显示在文本上方。
可配置项
flash-toast 提供了一些可配置项，可以帮助你更好地满足个性化需求。以下是可配置项列表：
type
消息提示类型，默认为 message，可选 success、error、image。
message
提示的文本内容，默认为空字符串。
delay
自动关闭的延迟时间（单位为毫秒），默认为 3000。设置为 false 表示不自动关闭。
position
消息提示的显示位置，默认为 'top-center'。
可选值为：
top-center: 顶部居中top-left: 顶部左侧top-right: 顶部右侧bottom-center: 底部居中bottom-left: 底部左侧bottom-right: 底部右侧
imageWidth
带图片的消息提示中图片的宽度，默认为 40。
imageHeight
带图片的消息提示中图片的高度，默认为 40。
closeBtn
是否显示关闭按钮，默认为 false。当该项为 true 时，用户可以通过点击关闭按钮关闭提示消息。
onClose
消息提示关闭后的回调函数，默认为空函数。
className
添加自定义类名，可以用来自定义消息提示的样式。
完整示例
------ ---------- ---- -------------- -- ------------ ---------------------------- ----------- -- ------------ ------------------------------------------------- ----------- - --------- -------------- ----------- --- ------------ --- --------- ----- ------ ------ -------- -- -- --------------- ---
总结
flash-toast 提供了一种非常方便的方式来添加弹窗提示消息功能，同时还提供了丰富的配置项，可以满足不同的需求。使用 flash-toast ，你可以免去繁琐的样式和交互代码，让你的代码变得更加简洁和易于维护。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600563c781e8991b448e125a