如何在 ion-avatar 周围创建高亮显示它已被点击？答案

【问题标题】：How to create highlight around ion-avatar that indicates that it has been clicked?如何在 ion-avatar 周围创建高亮显示它已被点击？
【发布时间】：2021-01-20 17:22:39
【问题描述】：

我正在使用 Ionic5 Angular，当用户点击它时，我想在 ion-avatar 周围创建一个突出显示，如果用户再次点击它，它将消失。

用户可以点击每张图片（一次一张），图片周围会出现高亮显示。

HTML：

<ion-card class="scrolling-wrapper">
          <div class="item" *ngFor="let item of list">
              <ion-avatar>
              <img [src]= "source to image" >
            </ion-avatar>
          </div>
</ion-card>

SCSS：

.scrolling-wrapper {
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  .item {
    display: inline-block;
    margin: 4px;
  }
}

【问题讨论】：

需要更多细节 .. 至少分享您的 html 代码，您如何在本节中添加类以及如何单击此 .. 这样我们就可以在最后复制它 .. 建议您回答
我添加了更多细节:)
你的点击功能如何
我已经在我的代码中实现了下面的答案。非常感谢您的帮助！

标签： ionic-framework

【解决方案1】：

你必须这样做：

声明一个空变量（例如：highlightedAvatar = "";）
从 .html 中获取被点击项目的 id
如果变量有值，则清空它，否则分配 id
创建要添加到 .css 的样式（例如亮度...）
加载带有条件的 css 类

您确实需要提供一些代码，以便您可以准确理解该过程

编辑：

HTML：

<ion-card class="scrolling-wrapper">
          <div class="item" *ngFor="let item of list">
              <ion-avatar [class.highlighted]="highlighted == item.id" (click)="selectAvatar(item.id)">
              <img [src]= "source to image" >
            </ion-avatar>
          </div>
</ion-card>

TS：

 export class AppComponent{
         highlighted = "";
    ...
    selectAvatar(id){
  if (this.highlighted === "") {
    this.highlighted = id;
  } else {
    this.highlighted = "";
  }
}

SCSS：

.highlighted{
filter: brightness(120%);
}

当然，您可以使用 css 来设计自己的突出显示方式

【讨论】：