Ember Spin Button2 是一个方便易用的 npm 包，提供了一个旋钮按钮的组件，可用于前端开发中。本文将详细介绍如何在 Ember 应用程序中使用 Ember Spin Button2。
安装
首先需要安装这个 npm 包。可以通过以下命令进行安装：
npm i ember-spin-button2 --save
使用
要使用 Ember Spin Button2，需要在应用程序中包含这个组件。可以通过以下命令进行组件添加：
ember generate component spin-button
这样就可以创建一个名为 spin-button 的组件，然后在它的模板中添加以下代码：
{{spin-button
label="提交"
action=(action 'submitForm')
icon="check"
}}在这个例子中，我们定义了一个标题为 “提交” 的按钮，当用户点击时调用 submitForm 动作，并使用 FontAwesome 中的 check 图标。你可以根据你自己的需要设置按钮的标题、动作和图标。
属性
Ember Spin Button2 的组件具有许多可配置的属性。以下是组件支持的一些属性：
| 属性 | 类型 | 描述 |
|---|---|---|
| label | string | 按钮的标题 |
| action | function | 按钮点击时执行的回调 |
| icon | string | 按钮上要显示的图标名称，这里需要使用 FontAwesome 的名称，例如“check” |
| busyLabel | string | 加载时按钮显示的标题字符串 |
| duration | number | 旋钮转一圈所需的时间，单位为毫秒 |
| spinCompleteIcon | string | 当按钮完成加载后显示的图标，这里需要使用 FontAwesome 的名称，例如“check” |
| resetOnComplete | boolean或函数 | 是否在完成加载后重置旋钮的状态 |
| isDisabled | boolean或函数 | 是否禁用按钮的状态 |
| isLoading | boolean或函数 | 是否在加载时启用按钮 |
示例
为了更好的理解如何使用 Ember Spin Button2，这里提供一个示例代码。在这个示例中，我们将创建一个简单的登录表单，包含一个用户名输入框和一个密码输入框。当用户点击登录按钮时，会调用顶层组件的 login 动作，并显示一个“登录中”的加载图标。
{{#spin-button
label="登录"
icon="sign-in"
action=(action "login")
isLoading=isLoggingIn
busyLabel="登录中 …"
}}
{{/spin-button}}还需要在组件的 JavaScript 代码中添加以下代码：
-- -------------------- ---- -------
------ --------- ---- -------------------
------ - -------- - ---- ----------------
------ - ------- - ---- ---------------
------ - ------ -- ------- - ---- -----------------
------ ------------ ---- ------------------------------------
------ ------- ------------------------------ -
------ ----------
--------- ---
--------- ---
------------ ------
------------- -------------------- ----------- ---------- -
------ ----------------------- -- ------------------------
---
-------- -
----- ------- -
-- -------------------- -
-------
-
--------------------
----------------------- ------
--- -
----- ----------- - -
--------- --------------
--------- -------------
--
----- -------------------------------------
- ----- ----- -
-- ------
- ------- -
-------------------
----------------------- -------
-
-
-
---在这个示例中，我们使用了 Ember Spin Button2 的 isLoading 属性来控制加载图标的显示。如果用户在填写表单之前点击了登录按钮，它将不会执行 login 动作，无法登录。
一旦用户输入了用户名和密码，并且表单被验证通过，我们就会尝试进行身份验证。我们使用 startSpinner() 方法来启动旋钮，在身份验证期间禁用登录按钮，并在身份验证成功或失败后停止旋钮，重置按钮并启用它。
总结
通过这篇文章，我们了解了如何使用 Ember Spin Button2，以及如何在 Ember 应用程序中添加并配置它。希望这篇文章对前端开发者们有所帮助，在实际应用中可以更高效的使用这个 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e15a563576b7b1ec9f4