如何为mat-select添加自定义操作？解决图标被芯片遮挡问题

问题描述 #

我需要在mat-select的下拉箭头旁添加一个自定义功能图标，但编写HTML/SCSS时遇到问题：新图标会被mat-chip元素遮挡，需要实现一个和箭头样式一致的图标。

现有代码 #

<mat-select
      multiple
      [compareWith]="compareWith"
      [(ngModel)]="value"
      [disabled]="isDisabled"
      (ngModelChange)="onTouchedFn()">
      <mat-select-trigger>
        <mat-chip-list>
          <mat-chip *ngFor="let item of value; index as i" removable (removed)="removeItem(item)">
            {{ displayChipsValue(item) }}
            <i matChipRemove [ngClass]="Icons"></i>
          </mat-chip>
        </mat-chip-list>
      </mat-select-trigger>
      <mat-option *ngFor="let type of dataSource" [value]="type.value">
        {{ type.text }}
      </mat-option>
    </mat-select>

解决方案 #

1. 调整HTML结构 #

在mat-select内部、mat-select-trigger之后添加自定义图标元素，确保它和下拉箭头处于相同层级：

<mat-select
      multiple
      [compareWith]="compareWith"
      [(ngModel)]="value"
      [disabled]="isDisabled"
      (ngModelChange)="onTouchedFn()">
      <mat-select-trigger>
        <mat-chip-list>
          <mat-chip *ngFor="let item of value; index as i" removable (removed)="removeItem(item)">
            {{ displayChipsValue(item) }}
            <i matChipRemove [ngClass]="Icons"></i>
          </mat-chip>
        </mat-chip-list>
      </mat-select-trigger>
      <!-- 自定义图标 -->
      <span class="custom-select-icon" (click)="handleCustomAction()" [disabled]="isDisabled">
        <!-- 这里用Material Icons为例，替换成你需要的图标类 -->
        <i class="material-icons">filter_alt</i>
      </span>
      <mat-option *ngFor="let type of dataSource" [value]="type.value">
        {{ type.text }}
      </mat-option>
    </mat-select>

2. 编写SCSS样式 #

通过绝对定位和层级控制，让图标避开箭头、不被chip遮挡，同时和默认箭头样式保持一致：

/* 给mat-select容器设置相对定位，作为图标定位的基准 */
.mat-select {
  position: relative;
}

/* 自定义图标样式 */
.custom-select-icon {
  position: absolute;
  right: 40px; /* 距离右侧的距离，避开默认下拉箭头（默认箭头在right:16px左右） */
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 10; /* 确保层级高于mat-chip，避免被遮挡 */
  color: rgba(0, 0, 0, 0.54); /* 和默认箭头颜色匹配 */
  
  /* Material Icons的通用样式（如果用其他图标库可忽略） */
  .material-icons {
    font-size: 24px; /* 和默认箭头大小一致 */
    font-weight: normal;
    font-style: normal;
    line-height: 1;
  }
}

/* 调整触发区的右内边距，给图标留出空间，防止chip延伸到图标区域 */
.mat-select-trigger {
  padding-right: 60px; /* 比图标的right值大，确保chip不会碰到图标 */
}

/* 禁用状态下的图标样式 */
.custom-select-icon[disabled],
.mat-select[disabled] .custom-select-icon {
  color: rgba(0, 0, 0, 0.38);
  cursor: not-allowed;
  pointer-events: none;
}

关键说明 #

• 图标放在mat-select内部，利用绝对定位固定在右侧，和默认箭头同层级，避免被chip的容器遮挡
• z-index:10确保图标层级高于mat-chip元素
• 调整mat-select-trigger的右内边距，限制chip列表的宽度，防止其覆盖图标
• 样式上和默认箭头保持颜色、大小一致，保证UI统一

内容的提问来源于stack exchange，提问作者qwerty