|
|
@@ -54,6 +54,7 @@
|
|
|
v-model="verificationDigits[index]"
|
|
|
type="number"
|
|
|
maxlength="1"
|
|
|
+ :focus="focusIndex === index"
|
|
|
class="verify-box"
|
|
|
@input="handleDigitInput(index, $event)"
|
|
|
@keyup.delete="handleDelete(index)"
|
|
|
@@ -84,6 +85,7 @@ export default {
|
|
|
currentPhone: '18800000097', // 当前手机号
|
|
|
newPhone: '', // 新手机号
|
|
|
verificationDigits: ['', '', '', '', ''], // 验证码
|
|
|
+ focusIndex: 0,
|
|
|
isCountingDown: false,
|
|
|
countdown: 60,
|
|
|
countdownText: '获取验证码',
|
|
|
@@ -130,7 +132,10 @@ export default {
|
|
|
// 自动跳转到下一框
|
|
|
if (value && index < 4) {
|
|
|
this.$nextTick(() => {
|
|
|
+ this.focusIndex = index + 1;
|
|
|
+ return;
|
|
|
const nextInput = this.$el.querySelector(`input[data-index="${index + 1}"]`);
|
|
|
+ console.log(nextInput)
|
|
|
if (nextInput) nextInput.focus();
|
|
|
});
|
|
|
}
|
|
|
@@ -140,6 +145,8 @@ export default {
|
|
|
handleDelete(index) {
|
|
|
if (!this.verificationDigits[index] && index > 0) {
|
|
|
this.$nextTick(() => {
|
|
|
+ //this.focusIndex = index - 1;
|
|
|
+ return;
|
|
|
const prevInput = this.$el.querySelector(`input[data-index="${index - 1}"]`);
|
|
|
if (prevInput) prevInput.focus();
|
|
|
});
|
fuchaoyong