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

一、下拉框组件

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:

 1 .memu-wrap {
 2   position: absolute;
 3   //right: 0;
 4   max-width: 13rem;
 5   width: 100%;
 6   height: 2rem;
 7   line-height: 2rem;
 8   z-index: 999;
 9 }
10 
11 .memu-item {
12   background: url('./../../../../assets/images/common/select_bg.png') no-repeat left center;
13   background-size: 100%;
14 
15   padding-left: 1rem;
16   cursor: pointer;
17   color: #fff;
18 }
19 
20 .search-container {
21   overflow: hidden;
22   height: 0;
23 }
24 
25 .search-container.active {
26   z-index: 0;
27   height: auto;
28   max-height: 14rem;
29   overflow-y: auto;
30 }
31 
32 .search-container.active .search-content {
33   top: 0;
34 }
35 
36 .search-container .search-title-wrap .title {
37   width: 49%;
38   display: inline-block;
39   text-align: center;
40   background-color: rgba(89, 125, 202, 1);
41   box-sizing: border-box;
42   border: 1px solid rgba(0, 202, 171, 1);
43   margin-top: 0.3rem;
44 }
45 
46 .search-container .search-title-wrap .title.mr2p {
47   margin-right: 2%;
48 }
49 
50 .search-container .search-content {
51   position: relative;
52   top: -20rem;
53   transition: top .3s;
54   // margin: 0 0.5rem;
55   margin-left: 0.5rem;
56   background-color: rgba(0, 0, 0, 0.3);
57   // -webkit-box-shadow: 0px 0px 10px rgba(50, 119, 163, 1);
58   // box-shadow: 0px 0px 10px rgba(50, 119, 163, 1);
59   font-size: 1rem;
60 }
61 
62 .search-content li {
63   padding: .3rem .5rem 0;
64 
65   span {
66     color: #fff;
67     cursor: pointer;
68     display: block;
69   }
70 
71   span:hover {
72     text-shadow: 0 0 2px #fff;
73   }
74 
75   &.active {
76     span {
77       text-shadow: 0 0 .2px #fff;
78     }
79   }
80 }
81 
82 .search-content li:last-child {
83   padding-bottom: .3rem;
84 }
85 
86 .map-wrap {
87   width: 100%;
88   height: 100%;
89   z-index: 1;
90 }
View Code

3.ts:

 1 import { Component, OnInit, Input, OnChanges, Output, EventEmitter } from '@angular/core';
 2 
 3 @Component({
 4   selector: 'app-selector',
 5   templateUrl: './selector.component.html',
 6   styleUrls: ['./selector.component.scss']
 7 })
 8 export class SelectorComponent implements OnInit, OnChanges {
 9 
10   @Input() list;    //渲染下拉框的数据
11   @Input() activeId;   //选中的id
12   @Output() changeEv = new EventEmitter();   
13 
14   isShowList:boolean = false;
15   enterFlag:boolean = false;
16   activeItem;
17 
18   constructor() {
19   }
20 
21   ngOnInit() {
22 
23   }
24 
25   ngOnChanges() {
26     if (this.list) {
27       if (this.activeId) {
28         this.activeItem = this.list.find(item => item['areaId'] == this.activeId);
29       } else {
30         this.activeItem = this.list ? this.list[0] : {};
31       }
32     }
33   }
34 
35   enterSearch() {
36     this.enterFlag = true;
37   }
38 
39   showSearchList(): void {
40     this.enterFlag = true;
41     if (!this.isShowList) {
42       this.isShowList = true;
43     }
44   }
45 
46   hideSearchList(event): void {
47     if (!!event.relatedTarget) {
48       this.enterFlag = false;
49       setTimeout(() => {
50         if (!this.enterFlag) {
51           this.isShowList = false;
52         }
53       }, 0);
54     }
55   }
56 
57   selectorChange(item) {
58     this.isShowList = false;
59     this.activeItem = item;
60     this.changeEv.emit(item);
61   }
62 }
View Code

 

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

xx.html:

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

 

 posted on 2020-11-27 12:05  楼顶铁板烧  阅读(430)  评论(0)  编辑  收藏  举报