如何在Vuetify v-stepper最后一步添加Finish按钮并绑定方法

直接通过绑定的step变量判断当前步骤，动态切换按钮文本和点击逻辑即可实现需求，无需依赖额外组件或复杂配置。

修改后的完整代码 #

<v-stepper v-model="step">
  <!-- Stepper Header -->
  <v-stepper-header>
    <v-stepper-item title="" value="1"></v-stepper-item>
    <v-divider></v-divider>
    <v-stepper-item title="" value="2"></v-stepper-item>
    <v-divider></v-divider>
    <v-stepper-item title="" value="3"></v-stepper-item>
    <v-divider></v-divider>
    <v-stepper-item title="" value="4"></v-stepper-item>
  </v-stepper-header>

  <!-- Stepper Windows -->
  <v-stepper-window>
    <v-stepper-window-item value="1">
      <v-card title="Choose A" flat>
        <!-- A selection -->
        <v-radio-group v-model="selectedA">
          <v-radio
            v-for="(item, index) in itemsA"
            :key="index"
            :label="item"
            :value="item"
          ></v-radio>
        </v-radio-group>
      </v-card>
    </v-stepper-window-item>

    <v-stepper-window-item value="2">
      <v-card title="Choose B" flat>
        <!-- B selection -->
        <v-radio-group v-model="selectedB">
          <v-radio
            v-for="(item, index) in itemsB"
            :key="index"
            :label="item"
            :value="item"
          ></v-radio>
        </v-radio-group>
      </v-card>
    </v-stepper-window-item>

    <v-stepper-window-item value="3">
      <v-card title="Choose C" flat>
        <!-- C selection -->
        <v-radio-group v-model="selectedC">
          <v-radio
            v-for="(item, index) in itemsC"
            :key="index"
            :label="item"
            :value="item"
          ></v-radio>
        </v-radio-group>
      </v-card>
    </v-stepper-window-item>

    <v-stepper-window-item value="4">
      <v-card title="Details" flat>
        <!-- Details input -->
        <v-text-field v-model="name" hide-details="auto" label="Name"></v-text-field>
        <v-radio-group v-model="selectedD" label="D Size" class="mt-8">
          <v-radio label="aD" value="1"></v-radio>
          <v-radio label="bD" value="2"></v-radio>
          <v-radio label="cD" value="3"></v-radio>
        </v-radio-group>
      </v-card>
    </v-stepper-window-item>
  </v-stepper-window>

  <!-- 修改后的Stepper Actions -->
  <v-stepper-actions @click:next="customActionForNext" @click:prev="customActionForPrev">
    <template #prev="{ props }">
      <v-btn @click="() => props.onClick()">Back</v-btn>
    </template>
    <template #next="{ props }">
      <v-btn 
        @click="step === 4 ? handleFinish() : props.onClick()"
        :color="step === 4 ? 'success' : 'primary'"
      >
        {{ step === 4 ? 'FINISH' : 'Next' }}
      </v-btn>
    </template>
  </v-stepper-actions>
</v-stepper>

配套脚本逻辑（根据你的Vue版本选择） #

Vue 3 Composition API

import { ref } from 'vue';

export default {
  setup() {
    const step = ref(1);
    const selectedA = ref('');
    const selectedB = ref('');
    const selectedC = ref('');
    const name = ref('');
    const selectedD = ref('');
    const itemsA = ref(['选项A1', '选项A2']);
    const itemsB = ref(['选项B1', '选项B2']);
    const itemsC = ref(['选项C1', '选项C2']);

    const customActionForNext = () => {
      // 原有的下一步自定义逻辑，比如表单校验
      console.log('进入下一步');
    };

    const customActionForPrev = () => {
      // 原有的上一步自定义逻辑
      console.log('返回上一步');
    };

    const handleFinish = () => {
      // 自定义完成逻辑，比如提交数据、跳转页面
      console.log('流程完成，收集到的数据:', {
        selectedA: selectedA.value,
        selectedB: selectedB.value,
        selectedC: selectedC.value,
        name: name.value,
        selectedD: selectedD.value
      });
      // 可选：重置步骤或者关闭弹窗等
      // step.value = 1;
    };

    return {
      step,
      selectedA,
      selectedB,
      selectedC,
      name,
      selectedD,
      itemsA,
      itemsB,
      itemsC,
      customActionForNext,
      customActionForPrev,
      handleFinish
    };
  }
};

Vue 2 Options API

export default {
  data() {
    return {
      step: 1,
      selectedA: '',
      selectedB: '',
      selectedC: '',
      name: '',
      selectedD: '',
      itemsA: ['选项A1', '选项A2'],
      itemsB: ['选项B1', '选项B2'],
      itemsC: ['选项C1', '选项C2']
    };
  },
  methods: {
    customActionForNext() {
      // 原有的下一步自定义逻辑
      console.log('进入下一步');
    },
    customActionForPrev() {
      // 原有的上一步自定义逻辑
      console.log('返回上一步');
    },
    handleFinish() {
      // 自定义完成逻辑
      console.log('流程完成，收集到的数据:', {
        selectedA: this.selectedA,
        selectedB: this.selectedB,
        selectedC: this.selectedC,
        name: this.name,
        selectedD: this.selectedD
      });
      // 可选操作
      // this.step = 1;
    }
  }
};

关键改动说明 #

• 动态判断步骤：通过step === 4识别最后一步，适配你的4步流程
• 切换按钮文本：用Vue的文本插值{{ ... }}动态显示“Next”或“FINISH”
• 自定义完成事件：最后一步点击时触发handleFinish，而非默认的下一步逻辑；非最后一步保留原有props.onClick()和customActionForNext监听
• 视觉区分：给Finish按钮设置success颜色，和普通Next按钮的primary颜色形成区别，提升用户感知

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