Question

在我的项目中，我使用幻灯片切换来激活或停用产品。一切正常，只有当我添加确认对话框时，我的幻灯片更改就像在Demo中一样。

因此，当我单击“取消”时，单击“确定”时滑动切换更改，幻灯片切换更改。

我的代码html：

<mat-card class="result">
  <mat-card-content>
    <h2 class="example-h2">Result</h2>
     <section class="example-section">
      <mat-slide-toggle
          class="example-margin"
          [color]="color"
          [checked]="checked"
          [disabled]="disabled"
          (click)="myfunction()">
        Slide me!
      </mat-slide-toggle>
    </section>
  </mat-card-content>
</mat-card>

代码ts：

export class SlideToggleConfigurableExample {
  color = 'accent';
  checked = false;
  disabled = false;
    myfunction() {
    if (confirm('Are you sure to change Status?')) {
     }
  }
}

我想说的是，当我点击确定时，如何更改我的幻灯片切换，当我点击取消时，我不想改变任何内容。

谢谢。

Answer 1

试试这个：

<mat-slide-toggle
      class="example-margin"
      [color]="color"
      [checked]="checked"
      [disabled]="disabled"
      (click)="myfunction()"
      onclick="return confirm('Are you sure?')">
    Slide me!
  </mat-slide-toggle>

并从ts

中删除if (confirm('Are you sure to change Status?')) {}

Demo

Answer 2

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: #c8e38f;
}
.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: #91c71f;
}
.mat-slide-toggle .mat-ripple-element{
    background-color: rgba(145, 199, 31, .12);
}

这是所有用于颜色mat-slide-toggle

的样式

单击“确认取消”按钮时，滑动切换不应更改

2 个答案: