Commit 1ff551864c8f30e1ee791955824ca4f2d3fe0947
1 parent
6986d055
optimize InputNumber when input a number than keydown
optimize InputNumber when input a number than keydown
Showing
2 changed files
with
34 additions
and
12 deletions
Show diff stats
src/components/input-number/input-number.vue
| @@ -144,32 +144,52 @@ | @@ -144,32 +144,52 @@ | ||
| 144 | preventDefault (e) { | 144 | preventDefault (e) { |
| 145 | e.preventDefault(); | 145 | e.preventDefault(); |
| 146 | }, | 146 | }, |
| 147 | - up () { | ||
| 148 | - if (this.upDisabled) { | 147 | + up (e) { |
| 148 | + const targetVal = Number(e.target.value); | ||
| 149 | + if (this.upDisabled && isNaN(targetVal)) { | ||
| 149 | return false; | 150 | return false; |
| 150 | } | 151 | } |
| 151 | - this.changeStep('up'); | 152 | + this.changeStep('up', e); |
| 152 | }, | 153 | }, |
| 153 | - down () { | ||
| 154 | - if (this.downDisabled) { | 154 | + down (e) { |
| 155 | + const targetVal = Number(e.target.value); | ||
| 156 | + if (this.downDisabled && isNaN(targetVal)) { | ||
| 155 | return false; | 157 | return false; |
| 156 | } | 158 | } |
| 157 | - this.changeStep('down'); | 159 | + this.changeStep('down', e); |
| 158 | }, | 160 | }, |
| 159 | - changeStep (type) { | 161 | + changeStep (type, e) { |
| 160 | if (this.disabled) { | 162 | if (this.disabled) { |
| 161 | return false; | 163 | return false; |
| 162 | } | 164 | } |
| 163 | 165 | ||
| 166 | + const targetVal = Number(e.target.value); | ||
| 164 | let val = Number(this.value); | 167 | let val = Number(this.value); |
| 165 | const step = Number(this.step); | 168 | const step = Number(this.step); |
| 166 | if (isNaN(val)) { | 169 | if (isNaN(val)) { |
| 167 | return false; | 170 | return false; |
| 168 | } | 171 | } |
| 169 | 172 | ||
| 170 | - if (type == 'up') { | 173 | + // input a number, and key up or down |
| 174 | + if (!isNaN(targetVal)) { | ||
| 175 | + if (type === 'up') { | ||
| 176 | + if (addNum(targetVal, step) <= this.max) { | ||
| 177 | + val = targetVal; | ||
| 178 | + } else { | ||
| 179 | + return false; | ||
| 180 | + } | ||
| 181 | + } else if (type === 'down') { | ||
| 182 | + if (addNum(targetVal, -step) >= this.min) { | ||
| 183 | + val = targetVal; | ||
| 184 | + } else { | ||
| 185 | + return false; | ||
| 186 | + } | ||
| 187 | + } | ||
| 188 | + } | ||
| 189 | + | ||
| 190 | + if (type === 'up') { | ||
| 171 | val = addNum(val, step); | 191 | val = addNum(val, step); |
| 172 | - } else if (type == 'down') { | 192 | + } else if (type === 'down') { |
| 173 | val = addNum(val, -step); | 193 | val = addNum(val, -step); |
| 174 | } | 194 | } |
| 175 | this.setValue(val); | 195 | this.setValue(val); |
| @@ -190,10 +210,10 @@ | @@ -190,10 +210,10 @@ | ||
| 190 | keyDown (e) { | 210 | keyDown (e) { |
| 191 | if (e.keyCode === 38) { | 211 | if (e.keyCode === 38) { |
| 192 | e.preventDefault(); | 212 | e.preventDefault(); |
| 193 | - this.up(); | 213 | + this.up(e); |
| 194 | } else if (e.keyCode === 40) { | 214 | } else if (e.keyCode === 40) { |
| 195 | e.preventDefault(); | 215 | e.preventDefault(); |
| 196 | - this.down(); | 216 | + this.down(e); |
| 197 | } | 217 | } |
| 198 | }, | 218 | }, |
| 199 | change (event) { | 219 | change (event) { |
| @@ -230,7 +250,7 @@ | @@ -230,7 +250,7 @@ | ||
| 230 | } | 250 | } |
| 231 | } | 251 | } |
| 232 | }, | 252 | }, |
| 233 | - ready () { | 253 | + compiled () { |
| 234 | this.changeVal(this.value); | 254 | this.changeVal(this.value); |
| 235 | }, | 255 | }, |
| 236 | watch: { | 256 | watch: { |
test/routers/input.vue
| 1 | <template> | 1 | <template> |
| 2 | + <Input-number :max="10" :min="1" :value="1"></Input-number> | ||
| 3 | + <br><br> | ||
| 2 | <i-input type="textarea" :autosize="true" placeholder="请输入..."></i-input> | 4 | <i-input type="textarea" :autosize="true" placeholder="请输入..."></i-input> |
| 3 | <i-input type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></i-input> | 5 | <i-input type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></i-input> |
| 4 | <i-input name="a" icon="ios-clock-outline" @on-focus="focus" @on-blur="blur" readonly style="width:200px;" :value.sync="v" @on-enter="enter" @on-click="iconclick" size="large" placeholder="请输入"></i-input> | 6 | <i-input name="a" icon="ios-clock-outline" @on-focus="focus" @on-blur="blur" readonly style="width:200px;" :value.sync="v" @on-enter="enter" @on-click="iconclick" size="large" placeholder="请输入"></i-input> |