ゼロからVueを実装するコンポーネントライブラリ(9)-InputNumber実装

Inputコンポーネントに基づいて二次拡張されたInputNumberコンポーネント
InputNumerコンポーネントの難点は、

マウス長押し、カウンタ値変動を実現する;

InputNumberコンポーネントの値の変化を招き、以下の操作v-modelバインド値の変化、プラス・マイナスボタン、inputコンポーネントの入力があり、上記の結果を処理する必要があるため、合理的なモードをどのように設計し、冗長コードを減らすか.

1.例
コード#コード#

<fat-radio-group v-model="value">
    <fat-radio :value="1">   fat-radio>
    <fat-radio :value="2">   fat-radio>
fat-radio-group>

<fat-radio-group v-model="anotherValue">
    <fat-radio :value="1">   fat-radio>
        <fat-radio :value="2" disabled>   fat-radio>
fat-radio-group>

<fat-input-number :step="5" v-model="stepValue" />

<fat-input-number :max="20" :min="0" :step="5" v-model="value" />

インスタンスアドレス:InputNumberインスタンス
コードアドレス:Github UI-Library
2.原理
まずInputコンポーネントを利用して、そのslot prependとslot appendの2つのスロットに、対応するプラス・マイナスボタンを挿入します.具体的には以下の通りです.

"input-number-inner"
    type="text"
    :disabled="disabled"
    v-model="inputValue"
    v-bind="$attrs"
>
    

    

次に、プラス・マイナスボタンの長押し機能を実現し、その本質はclickイベントを、mousedownおよびmouseupの2つのイベントに分けて処理することであり、具体的にはhandleClick関数に現れる.

handleClick(type) {
    const { step } = this;
    const period = 100;
    const timerHandler = () => {
        const { addDisabled, decDisabled } = this;
        if (!addDisabled && type === "add") this.inputNumberValue += step;
        if (!decDisabled && type === "dec") this.inputNumberValue -= step;
    };
    const timer = setInterval(timerHandler, period);
    const startTime = new Date();

    const handler = () => {
        const endTime = new Date();
        
        if (endTime - startTime < period) timerHandler();
        clearInterval(timer);
        document.removeEventListener("mouseup", handler, false);
    };
    document.addEventListener("mouseup", handler, false);
}

まず、傍受ボタンのmousedownがトリガーされると、以下の操作が完了する.

トリガ時間の記録startTime;

1つを定義setInterval1つおきperiod対応するtimerHandler関数を呼び出し、長押し操作をシミュレートする.

documentで傍受mouseupマウスが元に戻るとトリガーされるイベント.

そして、マウスを元に戻すと、documentのmouseupイベントがトリガーされます.この場合、対応する処理は次のようになります.

記録トリガ時間はendTime・endTime - startTime < period条件を満たせば一度timerHandler;

利用clearInterval停止setInterval、その後mouseupに対する傍受を取り除く.

InputNumberコンポーネントの値を変更するたびに、最大、最小値を超えているか、入力した値が数値であるかなどのルールを判断する必要があります.これらのルールを1つの関数として抽象化しても、コードが若干肥大化しているように見えますので、computed属性ペアinputValue状態をエージェントとして使用します.具体的には、次のようになります.

computed: {
    inputNumberValue: {
        get() {
            return this.inputValue;
        },
        set(value) {
            const { min, max, inputValue } = this;
            const limits = [{
                need: value => !isNum(value),
                value: inputValue
            }, {
                need: value => value >= max,
                value: max
            }, {
                need: value => value <= min,
                value: min
            }, {
                need: () => true,
                value: value
            }];
            this.inputValue = limits.find(limit => limit.need(value)).value;
        }
    }
}

inputValueへの変更を、inputNumberValueへの変更に変更し、同時にget、set関数をハイジャックし、setでルールを定義します.
3.使用
基礎となるInputNumberを実現し,その後は独自のスタイルで拡張できる.

過去の記事:

Vueをゼロから実現するコンポーネントライブラリ(ゼロ)-基本構造および構築ツール

Vueをゼロから実現するコンポーネントライブラリ(一)-Toast実現

Vueのコンポーネントライブラリをゼロから実現(二)-Slider実現

Vueをゼロから実現するコンポーネントライブラリ(三)-Tabs実現

Vueをゼロから実現するコンポーネントライブラリ(四)-File-Reader実現

Vueをゼロから実現するコンポーネントライブラリ(五)-Breadcrumb実現

Vueをゼロから実現するコンポーネントライブラリ(六)-Hover-Tip実現

Vueのコンポーネントライブラリをゼロから実現(七)-Message-Box実現

Vueのコンポーネントライブラリをゼロから実現(八)-Input実現

Vueのコンポーネントライブラリをゼロから実現(九)-InputNumber実現

Vueのコンポーネントライブラリをゼロから実現(十)-Select実現

Vueをゼロから実現するコンポーネントライブラリ(十一)-Date-picker実現

Vueをゼロから実現するコンポーネントライブラリ(12)-Table実現

Vueのコンポーネントライブラリをゼロから実現(十三)-Pagination実現

Vueのコンポーネントライブラリをゼロから実現(14)-RadioGroup実現

Vueのコンポーネントライブラリをゼロから実現(十五)-CheckboxGroup実現

オリジナル声明:この文章はオリジナル文章で、転載は出典を明記してください.