在前端开发中，有许多需要用到弹框提示的场景，如表单验证、登录等。而 ember-toastr 是一个基于 Ember.js 构建的弹框提示插件，它具有很好的可定制性和用户友好性。
安装
在使用 ember-toastr 之前，我们需要先安装它。
ember install ember-toastr
配置
ember-toastr 默认会将弹框提示放在应用程序的顶部，如果我们需要更改其位置，则需要在配置中指定：
// config/environment.js
ENV['ember-toastr'] = {
placementClass: 'toast-bottom-right',
preventDuplicates: true,
timeOut: 3000
};其中，placementClass 表示提示放置位置，preventDuplicates 表示是否防止重复提示，timeOut 表示提示消失时间（单位：毫秒）。
使用
在使用 ember-toastr 时，我们需要引入它，并在需要弹框提示的地方调用：
-- -------------------- ---- -------
------ - ------ -- ------- - ---- -----------------
------ - ------ - ---- ---------------
------ ------- ----- ---------- ------- ----- -
-------- ------
------------ -
--------------------------
-
-在上面的示例中，当数据加载成功后，我们使用 toastr.success() 来显示一条成功提示。
ember-toastr 还支持其他类型的提示，包括：
toastr.info()：信息提示toastr.warning()：警告提示toastr.error()：错误提示
我们还可以设置提示标题和消息文本：
toastr.error('加载失败！', '错误');在上面的示例中，"加载失败！" 是消息文本，"错误" 是提示标题。
此外，还可以通过设置参数来定制提示样式：
toastr.info('你有 3 条未读消息！', null, {
positionClass: 'toast-top-center',
progressBar: true,
newestOnTop: true
});在上面的示例中，positionClass 用于指定提示显示位置， progressBar 用于显示进度条，newestOnTop 用于设置是否将新提示放在顶部。
总结
本文介绍了如何使用 ember-toastr 这个弹框提示插件。ember-toastr 具有很好的可定制性，我们可以通过设置参数来实现不同样式的提示，同时它也有很好的用户友好性，可以有效提升用户体验。希望此篇文章可以对大家学习前端开发以及使用 ember-toastr 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/ember-toastr