eric-utilslist/js/StepNumber.js

基础组件类，五星好评,商品列表,计数器

import Component from "./Component.js";
import Utils from "./Utils.js";
export default class StepNumber extends Component{
    static cssBool=false;
    static STEP_CHANGE_EVENT="step_change_event";
    ids;
    _step=1;
    constructor(){
        super("div");
        this.elem.innerHTML=`
            <button class='left'>-</button>
            <input type='text' value='1'>
            <button class='right'>+</button>
        `
        this.elem.className="step-number";
        this.elem.children[0].disabled=true;
        this.elem.addEventListener("input",e=>this.inputHandler(e));
        this.elem.addEventListener("click",e=>this.clickHandler(e));
        if(!StepNumber.cssBool)StepNumber.setStyle();
    }
    inputHandler(e){
        if(e.target.nodeName!=="INPUT") return;
        e.target.value=e.target.value.replace(/\D/g,"");
        if(this.ids) return;
        this.ids=setTimeout(()=>{
            clearTimeout(this.ids);
            this.ids=undefined;
            this.setStep(e.target.value);
            this.dispatch();
        },500)
    }
    clickHandler(e){
        if(e.target.nodeName!=="BUTTON")return;
        
        if(e.target.className==="left"){
            // if(this._step===1) return;
            this.setStep(this._step-1)
        }else if(e.target.className==="right"){
            // if(this._step===99) return;
            this.setStep(this._step+1)
        }
        this.dispatch();
    }

    setStep(value){
        value=~~value;
        this.elem.children[2].disabled=false;
        this.elem.children[0].disabled=false;
        if(value>=99){
            value=99;
            this.elem.children[2].disabled=true;
        }else if(value<=1){
            this.elem.children[0].disabled=true;
            value=1;
        }
        this._step=value;
        this.elem.children[1].value=this._step;
    }

    dispatch(){
        var evt=new Event(StepNumber.STEP_CHANGE_EVENT);
        evt.step=this._step;
        this.dispatchEvent(evt)
    }

    static setStyle(){
        StepNumber.cssBool=true;
        Utils.setCSS(`.step-number{
            width: 80px;
            height: 20px;
            font-size: 0;
            position: relative;
        }
        .step-number>button{
            width: 17px;
            height: 20px;
            margin: 0;
            padding: 0;
            border:1px solid #000;
            text-align: center;
            line-height: 20px;
        }
        .step-number>input{
            width: 46px;
            height: 18px;
            margin: 0;
            padding: 0;
            text-align: center;
            border: 1px solid #000;
            outline: none;
            border-left: none;
            border-right: none;
            line-height: 18px;
            position: relative;
            top: -1px;
        }`)
    }
}