diff --git a/@types/input-number.d.ts b/@types/input-number.d.ts index de8aec76b..32d7486b0 100644 --- a/@types/input-number.d.ts +++ b/@types/input-number.d.ts @@ -3,6 +3,11 @@ import { CommonEventFunction } from '@tarojs/components/types/common' import AtComponent from './base' +interface InputError { + type: 'OVER' | 'LOW' | 'DISABLED', + errorValue: number, +} + export interface AtInputNumberProps extends AtComponent{ type: 'number' | 'digit' @@ -25,6 +30,8 @@ export interface AtInputNumberProps extends AtComponent{ onChange: (value: number) => void onBlur?: CommonEventFunction + + onErrorInput?: (errCb: InputError) => void } declare const AtInputNumber: ComponentClass diff --git a/docs/markdown/input-number.md b/docs/markdown/input-number.md index 88eca2ac1..2fd652400 100644 --- a/docs/markdown/input-number.md +++ b/docs/markdown/input-number.md @@ -135,3 +135,4 @@ export default class Index extends Taro.Component { |------- |--- |----- |---- | -------- | | onChange | √ | √ | 输入框值改变时触发的事件,开发者需要通过 onChange 事件来更新 value 值变化,onChange 函数必填 | 输入框当前值 value | | onBlur | √ | √ | 输入框值失去焦点时触发的事件 | event | +| onErrorInput | √ | √ | 输入框尝试输入错误数组触发的事件 | `({ type: 'OVER' | 'LOW' | 'DISABLED', errorValue:number})` | diff --git a/src/components/input-number/index.js b/src/components/input-number/index.js index c89a16c37..e3156b4da 100644 --- a/src/components/input-number/index.js +++ b/src/components/input-number/index.js @@ -42,11 +42,24 @@ initTestEnv() class AtInputNumber extends AtComponent { handleClick (clickType) { const { disabled, value, min, max, step } = this.props - if ( - disabled - || (clickType === 'minus' && value <= min) - || (clickType === 'plus' && value >= max) - ) return + const lowThanMin = (clickType === 'minus' && value <= min) + const OverThanMax = (clickType === 'plus' && value >= max) + if (lowThanMin || OverThanMax || disabled) { + const deltaValue = clickType === 'minus' ? -step : step + const errorValue = addNum(value, deltaValue) + if (disabled) { + this.handleError({ + type: 'DISABLED', + errorValue, + }) + } else { + this.handleError({ + type: lowThanMin ? 'LOW' : 'OVER', + errorValue, + }) + } + return + } const deltaValue = clickType === 'minus' ? -step : step let newValue = addNum(value, deltaValue) newValue = this.handleValue(newValue) @@ -59,9 +72,17 @@ class AtInputNumber extends AtComponent { // 此处不能使用 Math.max,会是字符串变数字,并丢失 . if (resultValue > max) { resultValue = max + this.handleError({ + type: 'OVER', + errorValue: resultValue, + }) } if (resultValue < min) { resultValue = min + this.handleError({ + type: 'LOW', + errorValue: resultValue, + }) } resultValue = parseValue(resultValue) return resultValue @@ -79,6 +100,11 @@ class AtInputNumber extends AtComponent { handleBlur = (...arg) => this.props.onBlur(...arg) + handleError = errorValue => { + if (!this.props.onErrorInput) { return } + this.props.onErrorInput(errorValue) + } + render () { const { customStyle, @@ -163,6 +189,7 @@ AtInputNumber.propTypes = { size: PropTypes.string, onChange: PropTypes.func, onBlur: PropTypes.func, + onErrorInput: PropTypes.func, } export default AtInputNumber