npm 包 ng2-btn-spinner 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要添加按钮的 loading 状态。这时候就可以用到一个叫做 ng2-btn-spinner 的 npm 包。该包提供了一种简单而灵活的方式来添加按钮 loading 状态，同时集成了对 Angular 2+ 的支持。本文将详细介绍它的使用方法。

安装和引入

首先，在终端中运行以下命令进行安装：

npm install ng2-btn-spinner --save

在需要使用的组件中引入 Ng2BtnSpinnerModule 模块：

import { Ng2BtnSpinnerModule } from 'ng2-btn-spinner';

@NgModule({
  imports: [ Ng2BtnSpinnerModule ]
})
export class MyComponentModule { }

使用方法

在组件中添加按钮，并通过 bsActive 属性来激活按钮的 loading 状态。默认情况下，当按钮处于 loading 状态时，按钮的文本会被替换成一个 spinner。如果需要自定义 spinner 样式或使用自定义样式，则需要额外的 css 样式表。

<button bsBtn [bsActive]="isLoading">
  <span *ngIf="!isLoading">提交</span>
  <span *ngIf="isLoading">提交中...</span>
</button>

上述代码中，通过 bsBtn 指令将按钮加以装饰，bsActive 指定按钮是否处于 loading 状态。同时利用 Angular 的模板语法来动态显示按钮的文本。

进阶使用

除了默认使用方法外，ng2-btn-spinner 包还提供了一些配置选项和指令功能：

配置选项

btnLoadingClass：自定义 loading 状态的 class，默认为 btn-loading
spinnerTpl：自定义 spinner 的 html 模板，默认为 <span class="spinner-border spinner-border-sm align-baseline ml-2"></span>

可以在应用程序的根模块中通过 Ng2BtnSpinnerService 注入来进行配置。

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

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

指令

bsBtn：将按钮装饰为指定样式
bsActive：控制按钮 loading 状态的激活和停止
bsEnable：控制按钮的禁用和启用状态

bsBtn 指令提供了多种样式可选：

"primary"
"secondary"
"success"
"danger"
"warning"
"info"
"light"
"dark"

可以通过以下方式来使用指令：

<button bsBtn bsActive="isLoading" bsEnable="!isLoading" [class.my-class]="myCondition">
  <span *ngIf="!isLoading">提交</span>
  <span *ngIf="isLoading">提交中...</span>
</button>

上述代码在按钮的基础上添加了一个 my-class 样式，并通过 bsEnable 指令来控制按钮是否可用。

示例代码

<button bsBtn [bsActive]="isLoading" [bsEnable]="!isLoading" class="btn btn-primary">
  <span *ngIf="!isLoading">提交</span>
  <span *ngIf="isLoading">提交中...</span>
</button>

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

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

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

上述代码在按钮上添加了 bsBtn 指令，并通过 isLoading 变量来控制按钮的 loading 状态。在 submit 方法中模拟异步提交，并在提交完成后停止 loading 状态。

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