Question

我想在禁用按钮上触发事件

  <button ion-button icon-only [disabled]="!isConnected" (click)="openModal()" (disabledClick)="showErrMsg()" shortVibrateOnTap>
    <ion-icon ios="ios-swap" md="ios-swap"></ion-icon>
  </button>

如果无法做到这一点，我如何设置按钮的样式，因为它已被禁用？

Answer 1

禁用按钮上的禁用类离子集opacity: 0.4;可提供视觉效果，pointer-events: none;可阻止任何事件触发。

因此，如果您想使按钮看起来像禁用，则应创建一个类

.disabled {opacity: 0.4;}

否则你可以用div包裹按钮并在其上附加一个点击事件：

 <div (click)="showErrMsg()">
    <button ion-button icon-only [disabled]="!isConnected" (click)="openModal()"  shortVibrateOnTap>
        <ion-icon ios="ios-swap" md="ios-swap"></ion-icon>
    </button>
</div>

在showErrMsg功能中，只有在!isConnected

时才能运行代码

Answer 2

我使用属性绑定来解决它。

<button ion-button icon-only [style.opacity]="DISABLED_CHECK ? 0.4 : 1" (click)="openModal()"  shortVibrateOnTap>
    <ion-icon ios="ios-swap" md="ios-swap"></ion-icon>
</button>

或使用自定义的disabeld类

<button ion-button icon-only [class.disabled]="DISABLED_CHECK" (click)="openModal()"  shortVibrateOnTap>
    <ion-icon ios="ios-swap" md="ios-swap"></ion-icon>
</button>

在我的openModal回调函数中，我使用了适当的策略。

禁用按钮上的射击事件

2 个答案: