数字输入框

直接上代码

<el-input
    type="number"
    placeholder="请输入"
    class="number"
    @blur="numberInputBlurHandle($event)"
    v-model.number="gptFormModel.count"
    :max="30"
    :min="1"
>
    <div slot="suffix" class="number-input-icon">
        <i class="el-icon-arrow-up" @click="numberEdit('increase')"></i>
        <i class="el-icon-arrow-down" @click="numberEdit('decrease')"></i>
    </div>
</el-input>

blur 处理

numberInputBlurHandle(event) {
    const { target } = event
    const { value } = target
    if (!/^([0-9]+\.?\d*)+$/.test(value)) {
        return false
    }
},

加减按钮处理

numberEdit(key) {
    switch (key) {
        case 'increase':
            this.gptFormModel.count = (this.gptFormModel.count === 30 ? this.gptFormModel.count : this.gptFormModel.count + 1)
            break
        case 'decrease':
            this.gptFormModel.count = (this.gptFormModel.count === 1 ? this.gptFormModel.count : this.gptFormModel.count - 1)
            break
    }
},

隐藏数字输入框的加减按钮

.el-input__inner {
    -moz-appearance: textfield;
    // 谷歌 去掉数字输入框的加减按钮
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        appearance: none;
        margin: 0;
    }
}