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 | 144 | preventDefault (e) { |
| 145 | 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 | 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 | 157 | return false; |
| 156 | 158 | } |
| 157 | - this.changeStep('down'); | |
| 159 | + this.changeStep('down', e); | |
| 158 | 160 | }, |
| 159 | - changeStep (type) { | |
| 161 | + changeStep (type, e) { | |
| 160 | 162 | if (this.disabled) { |
| 161 | 163 | return false; |
| 162 | 164 | } |
| 163 | 165 | |
| 166 | + const targetVal = Number(e.target.value); | |
| 164 | 167 | let val = Number(this.value); |
| 165 | 168 | const step = Number(this.step); |
| 166 | 169 | if (isNaN(val)) { |
| 167 | 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 | 191 | val = addNum(val, step); |
| 172 | - } else if (type == 'down') { | |
| 192 | + } else if (type === 'down') { | |
| 173 | 193 | val = addNum(val, -step); |
| 174 | 194 | } |
| 175 | 195 | this.setValue(val); |
| ... | ... | @@ -190,10 +210,10 @@ |
| 190 | 210 | keyDown (e) { |
| 191 | 211 | if (e.keyCode === 38) { |
| 192 | 212 | e.preventDefault(); |
| 193 | - this.up(); | |
| 213 | + this.up(e); | |
| 194 | 214 | } else if (e.keyCode === 40) { |
| 195 | 215 | e.preventDefault(); |
| 196 | - this.down(); | |
| 216 | + this.down(e); | |
| 197 | 217 | } |
| 198 | 218 | }, |
| 199 | 219 | change (event) { |
| ... | ... | @@ -230,7 +250,7 @@ |
| 230 | 250 | } |
| 231 | 251 | } |
| 232 | 252 | }, |
| 233 | - ready () { | |
| 253 | + compiled () { | |
| 234 | 254 | this.changeVal(this.value); |
| 235 | 255 | }, |
| 236 | 256 | watch: { | ... | ... |
test/routers/input.vue
| 1 | 1 | <template> |
| 2 | + <Input-number :max="10" :min="1" :value="1"></Input-number> | |
| 3 | + <br><br> | |
| 2 | 4 | <i-input type="textarea" :autosize="true" placeholder="请输入..."></i-input> |
| 3 | 5 | <i-input type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></i-input> |
| 4 | 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> | ... | ... |