Angular2.0实现的搜索框（重新按UX封装了样式）(）

最新推荐文章于 2024-05-30 09:33:14 发布

Miya_Ye

最新推荐文章于 2024-05-30 09:33:14 发布

阅读量1.3k

点赞数

分类专栏： angular2.0

本文链接：https://blog.csdn.net/april_4/article/details/52993041

版权

angular2.0 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

之前封成了个指令，本来想本模块自己用，后来别的同事也要用，干脆封装成一个模块，供外部调用

使用(加了一个属性)

<ky-search [disabled]="true" (searchContent)="searchContentChange($event)"> </ky-search>

html

<div class="tableSearch">
  <input class="inputSearch" type="text" #term (keyup)="search(term.value)" placeholder="请输入需要搜索内容" required/>
  <span  (click)="delSearch()"></span>
</div>

less部分--这部分请穆兄指导了下，写的很精彩，学习了

.tableSearch {
  width: 240px;
  position: relative;
  float: right;
}

.inputPrime {
  border-radius: 2px;
  padding-left: 6px;
  height: 30px;
  width: 240px;
  font-size: 12px;
  color: #666666;
}

.isPrimeForSpan {
  position: absolute;
  right: 10px;
  top: 7px;
  width: 16px;
  height: 16px;
}

.inputSearchIcon(@icon){
  background: url(@icon) no-repeat right 0;
  cursor: pointer;
}

.tableSearch .inputSearch:extend(.inputPrime) {
  border: 1px solid @stroke-gray;
  background: @default-white;
  &:disabled {
    background: @fill-gray;
  }
  &:focus {
    border: 1px solid @default-blue;
  }
  & + span:extend(.isPrimeForSpan){
    .inputSearchIcon("images/icon_search_mirror.png");
  }
  &:valid + span:extend(.isPrimeForSpan){
    .inputSearchIcon("images/icon_search_delete.png");
  }
  &:invalid:focus + span:extend(.isPrimeForSpan) {
    .inputSearchIcon("images/icon_search_mirror.png");
  }
  &:valid:focus + span:hover:extend(.isPrimeForSpan) {
    .inputSearchIcon("images/icon_search_delete_hover.png");
  }
}

ts部分

import { Component, Output, EventEmitter, OnInit } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Component({
  moduleId: module.id,
  selector: 'ky-search',
  styleUrls: ['./ky-search.css'],
  templateUrl: './ky-search.html',
})

export class KySearchComponent implements OnInit {
  //@Input() placeholder:string;
  @Output() searchContent = new EventEmitter<Object>();

  searchTermStream = new Subject<string>();


  search(term:string) {
    this.searchTermStream.next(term);
  }


  delSearch() {
    this.searchTermStream.next('');
    $('.inputSearch').val('');
  }

  getSearchStream() {
    let that = this;
    return that.searchTermStream
      .debounceTime(300)
      .distinctUntilChanged();
  }

  ngOnInit() {
    let that = this;

    that.getSearchStream().subscribe((res)=> {
      this.searchContent.emit(res);
    });

  }


}