带有弹出框的自定义选择，打开时更改颜色

Posted 2023-03-06

【中文标题】带有弹出框的自定义选择，打开时更改颜色

【英文标题】：custom select with popover, change color when open

【发布时间】：2018-06-14 01:40:27

【问题描述】：

我创建了一个带有 div 和 ngbPopover 的自定义选择。

我坚持在弹出框打开时如何设置“选择 div”的样式。 当有人单击它时，我的选择 div 应该获得不同的边框颜色，因此带有所有选项的弹出框已打开。 每当有人点击其他任何地方并因此弹出框关闭选择的边框颜色时，都应该恢复到原来的颜色。

我尝试过使用 :focus 或 :active 来执行此操作，但这些似乎不起作用..

有什么想法吗？？？？

html：

<div [ngbPopover]="Category" triggers="click:click" placement="bottom-left" #q="ngbPopover" class="select" (document:click)="q.close()" (click)="$event.stopPropagation()">
   selectedCategory || 'All'
  <ng-template #Category class="options">
      <div *ngFor="let category of categories" (click)="selectedCategory = category.value" class="option" [ngClass]="selected: category.value === selectedCategory">
           category.value 
      </div>
  </ng-template>
</div>
<span class="caret"></span>

CSS：

.select 
    display: inline-block;
    border: 1px solid #e5e5e5;
    color: #272727;
    font-weight: 400;
    font-size: 1.4rem;
    width: 95%;
    cursor: pointer;
    padding: 0.6rem 1.2rem;


.select:active 
    border: 1px solid yellow;


.options 
    width: 100%;


.option 
    width: 100%;
    padding: 0.5rem 2rem;
    cursor: pointer;
    color: #333;
    font-size: 1.4rem;
    font-family: Montserrat, sans-serif;


.option:hover 
    background-color: #f5f5f5;


.caret 
    margin-left: -2.5rem;


.selected,
.selected:hover 
    background-color: #4c59a8;
    color: #fff;


:host>>>ngb-popover-window 
    padding: 0;
    color: #adadad;
    width: calc(95% - 3rem);
    max-width: 100%;
    max-height: 24rem;
    overflow-y: scroll;
    display: block;
    border-radius: 0;
    position: absolute;


:host>>>ngb-popover-window>.popover-header 
    display: none;

【参考方案1】：

您可以使用@HostListener 来完成您的任务。 @HostListener 监听事件。

import  HostListener  from '@angular/core'
.
.
.
class YourComponent 
  constructor() 
  

  @HostListener('document:click') onDodumentClick(event: MouseEvent)  
    // do your task here 
  

希望对你有帮助

【讨论】：

我最终使用一个按钮来替换外部 div 而不是您的解决方案。您的解决方案可能奏效了，但我突然想到了这个按钮，结果证明它很容易完成我需要它做的事情。