Ember.js 是一个流行的 JavaScript 框架，提供了许多构建大型 Web 应用所需的功能和工具。其中 ember-flash-message 是一个非常有用的 npm 包，用于在 Ember.js 应用程序中快速添加 Flash 消息。本文将介绍如何安装和使用这个包。
安装
首先，在你的 Ember.js 应用程序中安装 ember-flash-message 包。可以通过 npm 安装它：
npm install ember-flash-message --save
然后在需要的地方引入它：
import FlashMessage from 'ember-flash-message';
使用
在你的应用程序中，你可以在需要显示 Flash 消息的地方创建一个新的消息：
this.flash({
message: 'Hello, World!',
type: 'success',
timeout: 3000
});这里指定了消息文本、类型和显示时间（以毫秒为单位）。
然后，你可以在你的应用程序的任何地方使用 FlashMessage 组件，从而实现该组件对消息的显示和处理。例如，在你的应用程序的某个模板中：
{{flash-message}}这将渲染一个空的 Flash 消息栏，可以在必要时显示一条消息。
组件属性
FlashMessage 组件提供了一些属性，可以调整其外观和行为。下面是这些属性的列表：
animate: 指定动画效果是否启用，默认为true。autoClear: 是否自动清除消息，默认为true。clearDuration: 清除消息的默认持续时间，默认为500毫秒。escToClear: 是否按 ESC 键清除当前消息，默认为false。showProgress: 是否显示进度条，默认为false。
这些属性可以在 FlashMessage 组件中设置，例如：
{{flash-message autoClear=false clearDuration=1000}}这里禁用了自动清除消息，并且将清除持续时间调整为 1 秒。
组件方法
FlashMessage 组件还提供了一些有用的方法，可以在应用程序的其他部分中调用。下面是这些方法的列表：
addMessage: 向 Flash 消息栏添加一条消息。clear: 清除当前消息。clearAll: 清除所有消息。
例如，你可以通过一个动作来添加一个新的消息：
-- -------------------- ---- -------
-------- -
----------------- -
-------------------------------------
-------- -----------
----- ----------
-------- ----
---
-
-然后你可以通过调用 clear 方法来清除当前消息：
this.get('flashMessage').clear();示例
下面是一个使用 ember-flash-message 包的完整示例，可以在 Ember Twiddle 中访问：
https://ember-twiddle.com/5587448c91b39001b51ec9db
该示例演示了如何通过 FlashMessage 组件来渲染和处理 Flash 消息。它包含了一个组件，可以创建和显示 Flash 消息，并在用户点击该消息时自动处理和删除它。
总结
ember-flash-message 是一个非常有用的 npm 包，可以为你在 Ember.js 应用程序中添加 Flash 消息提供便利。使用它可以让你更快地构建出更好的用户界面，并提供更好的用户体验。上述示例表明，它可以很容易地集成到任何 Ember.js 应用程序中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e17a563576b7b1ecab9