ionic2自定义component:数字输入框

我们平时使用app的时候都会遇到下图的数字控件。最近做ionic2项目的时候遇到一个类似的,就自己写了个控件

WechatIMG4.jpeg

下面贴出代码
html如下

<div class="numSelector">
    <div class="minus" (click)="minus()" tappable>
        <ion-icon name="ios-remove-outline"></ion-icon>
    </div>
    <div class="num">
        <ion-input type="tel" (ionChange)='inputChange()' [(ngModel)]="value"></ion-input>
    </div>
    <div class="add" (click)="add()" tappable>
        <ion-icon name="ios-add-outline"></ion-icon>
    </div>
</div>

ts代码如下


import { Component, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

const noop = () => {
};

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => HighlightDirective),
    multi: true
};

@Component({
    selector: 'custom-input',
    templateUrl: 'numInput.html',
    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class HighlightDirective implements ControlValueAccessor {

    //The internal data model
    private innerValue: any = '';

    //Placeholders for the callbacks which are later provided
    //by the Control Value Accessor
    private onTouchedCallback: () => void = noop;
    private onChangeCallback: (_: any) => void = noop;

    //get accessor
    get value(): any {
        return this.innerValue;
    };

    //set accessor including call the onchange callback
    set value(v: any) {
        if (v !== this.innerValue) {
            this.innerValue = v;
            this.onChangeCallback(v);
        }
    }

    add () {
        this.value ++;
        this.onTouchedCallback();
    }

    minus () {
        if(this.value > 0){
            this.value --;
            this.onTouchedCallback();
        }
    }

    inputChange () {
        if(isNaN(this.value)){
            this.value = 0;
            console.log(this.value)
        }
    }

    //Set touched on blur
    onBlur() {
        this.onTouchedCallback();
    }

    //From ControlValueAccessor interface
    writeValue(value: any) {
        if (value !== this.innerValue) {
            this.innerValue = value;
        }
    }

    //From ControlValueAccessor interface
    registerOnChange(fn: any) {
        this.onChangeCallback = fn;
    }

    //From ControlValueAccessor interface
    registerOnTouched(fn: any) {
        this.onTouchedCallback = fn;
    }

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,466评论 25 708
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,537评论 0 17
  • 今天突然有想写点什么的冲动,关于这个冲动,自我分析了一下,最先浮现在脑海里的念头就是想被看见,而这个想被看...
    良的心旅阅读 2,060评论 3 3
  • 回眸娇嗔,眉宇间尽显三分英气;笔锋陡转,宣纸上散碎一地年华
    校板报阅读 173评论 0 0