uni-app 自动填充验证码

在uni-app中，自动填充验证码通常涉及获取验证码输入框的焦点，并将验证码字符串逐一填入每个输入框。以下是一个简单的代码示例，展示了如何实现这一功能。

首先，假设你的验证码输入框是四个单独的输入框，如下所示：

<template>
  <view>
    <input 
      type="text" 
      v-model="code[0]" 
      maxlength="1" 
      @input="handleInput(0)" 
      class="code-input"
    />
    <input 
      type="text" 
      v-model="code[1]" 
      maxlength="1" 
      @input="handleInput(1)" 
      class="code-input"
    />
    <input 
      type="text" 
      v-model="code[2]" 
      maxlength="1" 
      @input="handleInput(2)" 
      class="code-input"
    />
    <input 
      type="text" 
      v-model="code[3]" 
      maxlength="1" 
      @input="handleInput(3)" 
      class="code-input"
    />
    <button @click="autoFillCode">自动填充验证码</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      code: ['', '', '', ''], // 存储验证码的数组
      receivedCode: '1234'   // 假设这是从服务器接收到的验证码
    };
  },
  methods: {
    handleInput(index) {
      // 如果当前输入框已满，自动聚焦到下一个输入框
      if (this.code[index].length === 1 && index < 3) {
        this.$nextTick(() => {
          this.$el.querySelectorAll('.code-input')[index + 1].focus();
        });
      }
    },
    autoFillCode() {
      this.code = this.receivedCode.split(''); // 将验证码字符串分割成数组
      // 手动触发输入事件以模拟用户输入
      this.code.forEach((char, index) => {
        this.$nextTick(() => {
          this.$el.querySelectorAll('.code-input')[index].value = char;
          this.$emit('input', { index, value: char }); // 模拟输入事件，如果需要的话
        });
      });
      // 如果需要，可以在填充完成后聚焦到最后一个输入框或其他逻辑
    }
  }
};
</script>

<style>
.code-input {
  width: 25%;
  box-sizing: border-box;
  text-align: center;
  margin-right: 5px;
}
</style>

在这个示例中，autoFillCode 方法会将接收到的验证码字符串 receivedCode 分割成单个字符，并逐一填充到验证码输入框中。同时，handleInput 方法确保在单个输入框填满后，焦点会自动转移到下一个输入框。

请注意，这个示例中的自动填充方法直接操作了DOM元素，这在某些情况下可能不是最佳实践。如果你希望保持更清晰的Vuex状态管理或避免直接DOM操作，可以考虑使用其他方法，比如通过Vue的事件机制来管理焦点和输入状态。