如何为Vuetify Stepper的上一步/下一步按钮绑定自定义函数

问题原因 #

Vuetify的<v-stepper>组件默认不提供内置的「上一步/下一步」按钮，也不存在click:prev、click:next这类内置事件，所以直接在组件上绑定这些事件不会触发任何操作。需要手动添加步骤导航按钮，并将自定义函数绑定到按钮的点击事件上。

修复方案 #

1. 在<v-stepper>内部添加v-stepper-footer插槽，用于放置导航按钮
2. 给按钮绑定@click事件到你的prev、next函数
3. 根据当前步骤控制按钮的禁用状态（比如第一步不能点击「上一步」，最后一步不能点击「下一步」）
4. 在next函数中实现异步验证逻辑，仅在验证通过时切换到下一步

修改后的完整代码：

<template>
  <v-container>
    <v-card>
      <v-stepper v-model="step" :items="items">
        <!-- 第一步：邮箱输入 -->
        <template v-slot:item.1>
          <v-container>
            <v-text-field
              v-model="email"
              label="邮箱"
              type="email"
              required
            ></v-text-field>
          </v-container>
        </template>

        <!-- 第二步：密码输入 -->
        <template v-slot:item.2>
          <v-container>
            <v-text-field
              v-model="password"
              label="密码"
              type="password"
              required
            ></v-text-field>
          </v-container>
        </template>

        <!-- 第三步：TOTP验证 -->
        <template v-slot:item.3>
          <v-container>
            <v-text-field
              v-model="totpCode"
              label="二次验证令牌"
              type="text"
              maxlength="6"
              required
            ></v-text-field>
          </v-container>
        </template>

        <!-- 导航按钮插槽 -->
        <template v-slot:footer>
          <v-stepper-footer>
            <v-btn
              variant="outlined"
              @click="prev"
              :disabled="step === 0"
            >
              上一步
            </v-btn>
            <v-btn
              variant="tonal"
              color="primary"
              @click="next"
              :disabled="!currentStepValid"
            >
              {{ step === items.length - 1 ? '完成' : '下一步' }}
            </v-btn>
          </v-stepper-footer>
        </template>
      </v-stepper>
    </v-card>
  </v-container>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

const step = ref(0);
const email = ref('');
const password = ref('');
const totpCode = ref('');

const items = [
  { title: '邮箱验证' },
  { title: '密码验证' },
  { title: '二次验证' },
];

// 计算当前步骤的输入是否合法（可根据需求调整）
const currentStepValid = computed(() => {
  switch (step.value) {
    case 0:
      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value);
    case 1:
      return password.value.length >= 6;
    case 2:
      return totpCode.value.length === 6;
    default:
      return false;
  }
});

// 上一步逻辑
const prev = () => {
  if (step.value > 0) {
    step.value--;
  }
};

// 下一步逻辑（包含异步验证）
const next = async () => {
  try {
    let isValid = false;
    // 根据当前步骤调用对应验证接口
    switch (step.value) {
      case 0:
        // 模拟验证邮箱是否存在的请求
        isValid = await validateEmail(email.value);
        break;
      case 1:
        // 模拟验证密码是否正确的请求
        isValid = await validatePassword(email.value, password.value);
        break;
      case 2:
        // 模拟验证TOTP令牌的请求
        isValid = await validateTotp(email.value, totpCode.value);
        if (isValid) {
          alert('登录成功');
          // 这里可以添加登录成功后的逻辑，比如跳转首页
          return;
        }
        break;
    }

    if (isValid && step.value < items.length - 1) {
      step.value++;
    } else if (!isValid) {
      // 验证失败时的提示，可替换为Vuetify的snackbar
      alert('验证失败，请检查输入');
    }
  } catch (error) {
    console.error('验证请求出错:', error);
    alert('服务器出错，请稍后再试');
  }
};

// 模拟异步验证函数（替换为你的实际接口调用）
const validateEmail = async (email: string): Promise<boolean> => {
  // 这里替换为真实的API请求，比如：
  // const res = await fetch('/api/check-email', { method: 'POST', body: JSON.stringify({ email }) });
  // return res.ok;
  await new Promise(resolve => setTimeout(resolve, 500));
  return email.includes('@example.com');
};

const validatePassword = async (email: string, password: string): Promise<boolean> => {
  await new Promise(resolve => setTimeout(resolve, 500));
  return password === '123456';
};

const validateTotp = async (email: string, totp: string): Promise<boolean> => {
  await new Promise(resolve => setTimeout(resolve, 500));
  return totp === '123456';
};
</script>

<style scoped lang="sass">
</style>

关键说明 #

• 通过v-stepper-footer插槽自定义导航按钮，直接绑定@click到你的prev/next函数，确保点击时触发自定义逻辑
• 使用computed属性currentStepValid检查当前步骤的输入合法性，禁用不满足条件的「下一步」按钮
• 在next函数中使用async/await处理异步验证请求，仅当服务器返回有效响应时才切换步骤
• 针对不同步骤分别调用对应的验证函数，失败时给出提示，不执行步骤切换

内容的提问来源于stack exchange，提问作者user14692598