如何禁用 Ionic 3 的离子卡？

Question

我想使用官方文档中列出的 disabled 属性禁用 ion-card。我尝试使用它，但没有任何反应，我仍然可以与卡交互。

我也试过使用 [disabled] 仍然没有禁用卡。

实现这一目标的正确方法是什么？

代码：

<ion-card (click)="openControllerPage('ERD')" disabled='true'>
          <ion-card-content>
            <div style="text-align: center;">
              <img src="assets/imgs/executive_dashboard.png" style="height: 30px;width: 30px">
              <h2 style="color: #8d8d8d"><b>Executive<br> Dashboard</b></h2>
            </div>
          </ion-card-content>
 </ion-card>

Answer 1

试试这个，

<ion-card (click)="openControllerPage('ERD')" [disabled]="true">
          <ion-card-content>
            <div style="text-align: center;">
              <img src="assets/imgs/executive_dashboard.png" style="height: 30px;width: 30px">
              <h2 style="color: #8d8d8d"><b>Executive<br> Dashboard</b></h2>
            </div>
          </ion-card-content>
 </ion-card>

Answer 2

page.html

    <ion-card disabled="true">
    <p>Text</p>
    </ion-card>

//不禁用

https://prnt.sc/p9olvz

//禁用

https://prnt.sc/p9om69

查看带有/不带有禁用属性的代码

Answer 3

根据文档，disabled="true" 应该可以解决问题，但作为一种解决方法，您可以使用 user-select: none;

.html

<ion-card disabled="true">
  ...
</ion-card>

.sccs

ion-card[disabled="true"] {
  user-select: none;
}

Answer 4

根据您的标签，您使用的是 ionic 3，那么您也在查看错误的文档。你应该看看version 3 documentation

ionic 3 上的卡禁用功能不存在，但在 ionic 4 中引入。因此您需要以某种方式解决此问题，这可以通过编程方式完成，如答案 here。演示：STACKBLITZ

也就是说，如果你想有条件地禁用卡，你可以使用一个布尔标志：

(click)="isDisabled ? $event.stopPropagation() : openControllerPage('ERD'); isDisabled ? false : null"
[class.isDisabled]="isDisabled"

否则，如果应该始终禁用点击事件，请从卡片中完全删除它。

...但是无论您选择什么路径，您还可能需要在禁用时设置卡片样式，以便用户可以看到卡片实际上已被禁用。