ionic3 自定义购物加减组件

1. 创建组件

执行命令

$ 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>();//数据改变通知

  @Input("buyNumber")
  buyNumber: any= 1;//购买数

  @Input("goods")
  goods: any = '';//商品数据，用来判断所修改的数量属于哪个商品

  @Input("maxQty")
  maxQty: number;//最大限制数

  @Input("minQty")
  minQty: number = 1;//最小购买数，默认0

  disabled: boolean = false;//是否禁止输入，默认允许
  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点击事件,阻止冒泡
   */
  onMyInput(event) {
    event.stopPropagation();
  }

  /**
   * 数据变化事件
   */
  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 >数量：</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. 调用

以懒加载页面为例
在所需页面的module里导入CompoentsModule

图片.png

这样页面才能正常使用
在页面的html

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

页面的ts里添加函数接收数据更改后回调

 /**
 * 数量变化回调
 */
  onUpdate(data) {
    console.log(data);
  }

4. 效果

图片.png

也可多个

图片.png

当输入所达到的最小数量时，减按钮会进行禁用，反之亦然

图片.png 图片.png