Commit 886aeeb0ed268bbbd2db6fe45d57e818e4cd2784
1 parent
737e9b8d
update input-number
Showing
2 changed files
with
16 additions
and
19 deletions
Show diff stats
examples/routers/input-number.vue
| @@ -54,7 +54,8 @@ | @@ -54,7 +54,8 @@ | ||
| 54 | <InputNumber v-model="value3" style="width: 200px" placeholder="Enter something..."></InputNumber> --> | 54 | <InputNumber v-model="value3" style="width: 200px" placeholder="Enter something..."></InputNumber> --> |
| 55 | 55 | ||
| 56 | 56 | ||
| 57 | - <InputNumber v-model="valueNull" style="width: 200px" :min='0' :max='10000' :precision='2' ></InputNumber> | 57 | + <InputNumber v-model="valueNull" style="width: 200px" :min='-1000' :max='10000' :precision='2' ></InputNumber> |
| 58 | + <InputNumber v-model="valueNull" style="width: 200px" ></InputNumber> | ||
| 58 | </div> | 59 | </div> |
| 59 | </template> | 60 | </template> |
| 60 | <script> | 61 | <script> |
src/components/input-number/input-number.vue
| @@ -253,6 +253,12 @@ | @@ -253,6 +253,12 @@ | ||
| 253 | // 如果 step 是小数,且没有设置 precision,是有问题的 | 253 | // 如果 step 是小数,且没有设置 precision,是有问题的 |
| 254 | if (val && !isNaN(this.precision)) val = Number(Number(val).toFixed(this.precision)); | 254 | if (val && !isNaN(this.precision)) val = Number(Number(val).toFixed(this.precision)); |
| 255 | 255 | ||
| 256 | + const {min, max} = this; | ||
| 257 | + if (val > max) { | ||
| 258 | + val = max; | ||
| 259 | + } else if (val < min) { | ||
| 260 | + val = min; | ||
| 261 | + } | ||
| 256 | this.$nextTick(() => { | 262 | this.$nextTick(() => { |
| 257 | this.currentValue = val; | 263 | this.currentValue = val; |
| 258 | this.$emit('input', val); | 264 | this.$emit('input', val); |
| @@ -278,42 +284,32 @@ | @@ -278,42 +284,32 @@ | ||
| 278 | } | 284 | } |
| 279 | }, | 285 | }, |
| 280 | change (event) { | 286 | change (event) { |
| 287 | + if (event.type == 'input') return; | ||
| 281 | let val = event.target.value.trim(); | 288 | let val = event.target.value.trim(); |
| 282 | if (this.parser) { | 289 | if (this.parser) { |
| 283 | val = this.parser(val); | 290 | val = this.parser(val); |
| 284 | } | 291 | } |
| 285 | - | ||
| 286 | - if (event.type == 'input' && val.match(/^\-?\.?$|\.$/)) return; // prevent fire early if decimal. If no more input the change event will fire later | ||
| 287 | - | 292 | + |
| 288 | const {min, max} = this; | 293 | const {min, max} = this; |
| 289 | const isEmptyString = val.length === 0; | 294 | const isEmptyString = val.length === 0; |
| 290 | - val = Number(val); | ||
| 291 | - | ||
| 292 | if(isEmptyString){ | 295 | if(isEmptyString){ |
| 293 | this.setValue(null); | 296 | this.setValue(null); |
| 294 | return; | 297 | return; |
| 295 | } | 298 | } |
| 296 | - if (event.type == 'change'){ | ||
| 297 | - if (val === this.currentValue && val > min && val < max) return; // already fired change for input event | ||
| 298 | - } | 299 | + //if (event.type == 'input' && val.match(/^\-?\.?$|\.$/)) return; // prevent fire early if decimal. If no more input the change event will fire later |
| 300 | + | ||
| 301 | + val = Number(val); | ||
| 299 | 302 | ||
| 300 | - if (!isNaN(val) && !isEmptyString) { | 303 | + if (!isNaN(val)) { |
| 301 | this.currentValue = val; | 304 | this.currentValue = val; |
| 302 | - | ||
| 303 | - if (event.type == 'input' && val < min) return; // prevent fire early in case user is typing a bigger number. Change will handle this otherwise. | ||
| 304 | - if (val > max) { | ||
| 305 | - this.setValue(max); | ||
| 306 | - } else if (val < min) { | ||
| 307 | - this.setValue(min); | ||
| 308 | - } else { | ||
| 309 | - this.setValue(val); | ||
| 310 | - } | 305 | + this.setValue(val); |
| 311 | } else { | 306 | } else { |
| 312 | event.target.value = this.currentValue; | 307 | event.target.value = this.currentValue; |
| 313 | } | 308 | } |
| 314 | }, | 309 | }, |
| 315 | changeVal (val) { | 310 | changeVal (val) { |
| 316 | val = Number(val); | 311 | val = Number(val); |
| 312 | + //this.setValue(val); | ||
| 317 | if (!isNaN(val)) { | 313 | if (!isNaN(val)) { |
| 318 | const step = this.step; | 314 | const step = this.step; |
| 319 | 315 |