简单的下拉框组件（原生）

一、下拉框组件

1.html：

<div class="memu-wrap">
  <div class="memu-item" (click)="showSearchList()" (mouseenter)="enterSearch()" (mouseleave)="hideSearchList($event)">
    {{activeItem?.areaName}}</div>
  <div class="search-container" [class.active]="isShowList" (mouseenter)="showSearchList()"
    (mouseleave)="hideSearchList($event)">
    <ul class="search-content">
      <li *ngFor="let item of list">
        <span class="name" (click)="selectorChange(item)">{{item.areaName}}</span>
      </li>
    </ul>
  </div>
</div>

2.scss:

.memu-wrap {
  position: absolute;
  //right: 0;
  max-width: 13rem;
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  z-index: 999;
}

.memu-item {
  background: url('./../../../../assets/images/common/select_bg.png') no-repeat left center;
  background-size: 100%;

  padding-left: 1rem;
  cursor: pointer;
  color: #fff;
}

.search-container {
  overflow: hidden;
  height: 0;
}

.search-container.active {
  z-index: 0;
  height: auto;
  max-height: 14rem;
  overflow-y: auto;
}

.search-container.active .search-content {
  top: 0;
}

.search-container .search-title-wrap .title {
  width: 49%;
  display: inline-block;
  text-align: center;
  background-color: rgba(89, 125, 202, 1);
  box-sizing: border-box;
  border: 1px solid rgba(0, 202, 171, 1);
  margin-top: 0.3rem;
}

.search-container .search-title-wrap .title.mr2p {
  margin-right: 2%;
}

.search-container .search-content {
  position: relative;
  top: -20rem;
  transition: top .3s;
  // margin: 0 0.5rem;
  margin-left: 0.5rem;
  background-color: rgba(0, 0, 0, 0.3);
  // -webkit-box-shadow: 0px 0px 10px rgba(50, 119, 163, 1);
  // box-shadow: 0px 0px 10px rgba(50, 119, 163, 1);
  font-size: 1rem;
}

.search-content li {
  padding: .3rem .5rem 0;

  span {
    color: #fff;
    cursor: pointer;
    display: block;
  }

  span:hover {
    text-shadow: 0 0 2px #fff;
  }

  &.active {
    span {
      text-shadow: 0 0 .2px #fff;
    }
  }
}

.search-content li:last-child {
  padding-bottom: .3rem;
}

.map-wrap {
  width: 100%;
  height: 100%;
  z-index: 1;
}

3.ts:

import { Component, OnInit, Input, OnChanges, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-selector',
  templateUrl: './selector.component.html',
  styleUrls: ['./selector.component.scss']
})
export class SelectorComponent implements OnInit, OnChanges {

  @Input() list;    //渲染下拉框的数据
  @Input() activeId;   //选中的id
  @Output() changeEv = new EventEmitter();   

  isShowList:boolean = false;
  enterFlag:boolean = false;
  activeItem;

  constructor() {
  }

  ngOnInit() {

  }

  ngOnChanges() {
    if (this.list) {
      if (this.activeId) {
        this.activeItem = this.list.find(item => item['areaId'] == this.activeId);
      } else {
        this.activeItem = this.list ? this.list[0] : {};
      }
    }
  }

  enterSearch() {
    this.enterFlag = true;
  }

  showSearchList(): void {
    this.enterFlag = true;
    if (!this.isShowList) {
      this.isShowList = true;
    }
  }

  hideSearchList(event): void {
    if (!!event.relatedTarget) {
      this.enterFlag = false;
      setTimeout(() => {
        if (!this.enterFlag) {
          this.isShowList = false;
        }
      }, 0);
    }
  }

  selectorChange(item) {
    this.isShowList = false;
    this.activeItem = item;
    this.changeEv.emit(item);
  }
}

二、需使用该下拉框的组件

xx.html:

 <li>
      <app-selector [list]="areaList" [activeId]="areaId" (changeEv)="selectedAreaEv($event)"></app-selector>
    </li>