npm 包 ember-task-button 是一个能帮助开发者创建带有 loading、success 和 error 三种状态的按钮组件的工具包。本文将介绍该 npm 包的使用方法和相关细节。
安装
使用 npm 安装 ember-task-button：
npm install ember-task-button
创建按钮组件
在创建一个基于 ember-task-button 的按钮组件之前，我们需要了解一些概念： task、isLoading、isError 和 isSuccess。在每个状态下我们都可以拥有不同的文本和样式。下面是一个基本的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ------- - ---- --------------------
------ ------- ------------------------
----------- ---------
---------- ------
-------- ------
---------- ------
------- ------------- - -- -
-------------------- ---------- ----- ---------- ------ -------- ----- ---
----- -------------- -- -- - --
-------------------- ---------- ------ ---------- ---- ---
----------
-------- -
----- -------- -
--- -
----- -----------------------------
- ----- --- -
-------------------- ---------- ------ -------- ---- ---
-
-
-
---在此示例中，我们定义了一个名为 myTask 的任务（task），它等待 1 秒钟，对 isLoading、isSuccess 和 isError 进行设置，并设置其 drop 属性。在 action 中，我们提供了一个 async/await 的实现，以便更好地处理执行结果。
在模板中使用
现在我们可以在模板中使用我们的按钮组件了，例如：
-- -------------------- ---- -------
-------------- ------ ------------------- --------------- ---------------------
----- -----------
--------
------ -- -----------
--------
------ -- ---------
------
--------
--------------
-------
----------------在模板中，我们使用的 myTask、isLoading、isError 和 isSuccess 都是我们之前在组件中定义的属性。
总结
在本文中，我们学习了如何使用 npm 包 ember-task-button 来创建一个可在不同状态下显示不同文本和样式的按钮。通过使用 drop 属性和 async/await 机制，我们可以更好地处理任务的执行结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600552dc81e8991b448d0464