1. 創(chuàng)建組件

執(zhí)行命令

$ ionic g component ion-meter

成功后如圖

圖片.png

2.修改組件

ion-meter.ts

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

/**
 * Generated class for the IonMeterComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'ion-meter',
  templateUrl: 'ion-meter.html'
})
export class IonMeterComponent implements OnChanges, OnInit {

  @ViewChild('input') input: any;

  @Output()
  onUpdate = new EventEmitter<any>();//數(shù)據(jù)改變通知

  @Input("buyNumber")
  buyNumber: any= 1;//購(gòu)買(mǎi)數(shù)

  @Input("goods")
  goods: any = '';//商品數(shù)據(jù)，用來(lái)判斷所修改的數(shù)量屬于哪個(gè)商品

  @Input("maxQty")
  maxQty: number;//最大限制數(shù)

  @Input("minQty")
  minQty: number = 1;//最小購(gòu)買(mǎi)數(shù)，默認(rèn)0

  disabled: boolean = false;//是否禁止輸入洼怔，默認(rèn)允許
  minus: boolean = true;//是否禁用減按鈕
  add: boolean = false;//是否禁用加按鈕

  constructor() {
  }

  /**
   * 初始化
   */
  ngOnInit() {

  }

  /**
   * input輸入事件
   */
  onInput(event) {
    event.stopPropagation();
    this.buyNumber = this.buyNumber.replace(/[^0-9]/ig, "");
    this.input.nativeElement.value = this.buyNumber;
    if (this.maxQty && Number(this.buyNumber) >= this.maxQty) {
      this.add = true;
      if (this.maxQty > this.minQty) {
        this.minus = false;
      }
      this.buyNumber = this.maxQty;
      this.onEvent();
      this.input.nativeElement.value = this.buyNumber;
      return;
    }
    //判斷是否禁用減按鈕
    if (this.buyNumber && this.buyNumber > this.minQty) {
      this.minus = false;
    } else {
      this.minus = true;
    }

    this.onEvent();
  }

  /**
   * 減事件
   */
  onMinus(event) {
    event.stopPropagation();

    if (this.buyNumber && this.buyNumber > this.minQty) {
      this.buyNumber--;
      //判斷是否禁用減按鈕
      if (this.buyNumber == this.minQty) {
        this.minus = true;
      }
      if (this.maxQty && this.buyNumber < this.maxQty) {
        this.add = false;
      }
      this.onEvent();
    }
  }

  /**
   * 加事件
   */
  onAdd(event) {
    event.stopPropagation();
    if (this.maxQty && this.buyNumber >= this.maxQty) {
      this.add = true;
      return;
    }
    this.buyNumber++;
    this.onEvent();
    this.minus = false;
  }

  /**
   * 向父組件傳遞事件
   */
  onEvent() {
    this.onUpdate.emit({ number: this.buyNumber, goods: this.goods });
  }

  /**
   * input點(diǎn)擊事件,阻止冒泡
   */
  onMyInput(event) {
    event.stopPropagation();
  }

  /**
   * 數(shù)據(jù)變化事件
   */
  ngOnChanges() {
    this.maxQty = Number(this.maxQty);
    this.buyNumber = Number(this.buyNumber);
    if (this.buyNumber > this.minQty) {
      this.minus = false;
    }

    if (this.maxQty && this.buyNumber >= this.maxQty) {
      this.add = true;
    }

  }
}

ion-meter.html

<!-- Generated template for the IonMeterComponent component -->
<ion-row >
    <ion-col col-6  >
        <samp >數(shù)量：</samp>
    </ion-col>

    <ion-col col-2>
        <button ion-button [disabled]='minus || disabled' (click)="onMinus($event)" clear>
            <ion-icon name="remove-circle" color="primary" ></ion-icon>
        </button>
    </ion-col>

    <ion-col col-2> 
        <input [(ngModel)]="buyNumber" (input)="onInput($event)" (click)="onMyInput($event)" [disabled]='disabled' #input >
    </ion-col>

    <ion-col col-2 text-right>
         <button ion-button [disabled]='add || disabled' (click)="onAdd($event)" clear>
            <ion-icon name="add-circle" color="primary"></ion-icon>
        </button>
    </ion-col>
</ion-row>

ion-meter.scss

ion-meter {
    samp{
        height: 30px;
        line-height: 30px;
        font-size: 1.2rem;
    }
    input{
        width: 100%;
        height: 100%;
        font-size: 1.8rem;
        text-align: center;
        cursor: pointer;
        border-width: 0;
        outline:none;
    }
    .button {
        height: inherit; 
        margin: 0; 
        padding: 0; 
    }
    ion-icon {
        font-size: 1.8em;
    }
}

3. 調(diào)用

以懶加載頁(yè)面為例
在所需頁(yè)面的module里導(dǎo)入CompoentsModule

圖片.png

這樣頁(yè)面才能正常使用
在頁(yè)面的html

 <ion-meter buyNumber='2' maxQty='10' minQty='1' goods="A001" (onUpdate)="onUpdate($event)"></ion-meter>

頁(yè)面的ts里添加函數(shù)接收數(shù)據(jù)更改后回調(diào)

 /**
 * 數(shù)量變化回調(diào)
 */
  onUpdate(data) {
    console.log(data);
  }

4. 效果

圖片.png

也可多個(gè)

圖片.png

當(dāng)輸入所達(dá)到的最小數(shù)量時(shí)蜈出，減按鈕會(huì)進(jìn)行禁用，反之亦然

圖片.png

圖片.png