npm 包 Ember-Flash-Messages 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在Web开发中，消息提示是一个极其重要的组成部分，它可以向用户提供信息反馈和方便的操作指引。而 Ember-Flash-Messages 就是一个非常有用的消息提示库，它提供了多种消息类型和样式，而且还支持自定义消息和回调函数。本文将详细介绍 Ember-Flash-Messages 的使用方法和注意事项，帮助你快速上手。

Ember-Flash-Messages 的安装与预备工作

Ember-Flash-Messages 是一个 Ember CLI 插件，所以你需要先安装 Ember CLI。在安装完成后，你可以通过以下命令安装 Ember-Flash-Messages：

$ ember install ember-flash-messages

接下来，你需要在你的 Handlebars 模板中添加以下示例代码才能将消息组件渲染出来：

{{#flash-message}}
  {{#each flashMessages as |flashMessage|}}
    <div class="alert {{flashMessage.type}} alert-dismissible fade in show" role="alert">
      {{flashMessage.message}}
      <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
    </div>
  {{/each}}
{{/flash-message}}

其中，flashMessages 数组中存放了所有消息，flashMessage 是循环变量。你需要自定义样式表来适配消息组件。

Ember-Flash-Messages 的普通使用

一旦 Ember-Flash-Messages 已经安装完成并且组件已经渲染成功，你就可以使用消息组件了。以下代码将展示如何在 action 中使用 Ember-Flash-Messages：

-- -------------------- ---- -------
------ --------- ---- -------------------
------ - ------ -- ------- - ---- -----------------

------ ------- ------------------
  -------------- ----------

  -------- -
    ---------- -
      -- ---- ---- -----
      --------------------------------------- --- ---- ----- ----------------
    -
  -
---

在这个示例中，我们注入了 flashMessages 服务，然后使用它的 success() 函数来将消息添加到组件中。除了 success() 函数，error()、warning() 和 info() 函数也是可用的。

Ember-Flash-Messages 的更多用法

在 Ember-Flash-Messages 中，你可以通过传递一些其他的参数来自定义消息内容、类型、动画和回调函数。以下代码展示了一些常见用法：

-- -------------------- ---- -------
-------------------------------
  -------- ----- --- ---- ----- ---------------
  ----- ----------
  -------- ----- -- ------
  ------ ----- -- ----
  ------- ----- -- --------
  --------------- ------ -- -----------
  -------- -
    ----------------- ----- --- ---- ---------
  --
  -------- -
    ----------------- ----- --- ---- ---------
  -
---

在这个示例中，我们使用了 add() 函数来手动添加消息到组件中。其他参数还包括 extendedTimeout、extendedTimeOut、allowHTML 和 showProgressbar 等。你可以根据你的需求自行定制。

Ember-Flash-Messages 的注意事项

在处理多个消息时，如果你将 add() 函数和 success()、error()、warning() 或 info() 函数混合使用，组件的行为将是不确定的。因此，我们建议你只使用 add() 函数来添加消息到组件中。
Ember-Flash-Messages 不支持多语言消息的翻译。如果你需要翻译功能，你需要了解如何使用 Ember CLI 的插件和包管理器。

总结

本文介绍了 Ember-Flash-Messages 的基本用法和更多用法。在使用 Ember-Flash-Messages 时，你需要注意不同参数的作用，以及在处理多个消息时使用的函数。希望这篇文章能够帮助你更好地使用 Ember-Flash-Messages。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066e16a563576b7b1eca9b