带验证功能的可编辑 vuetify 步进器

Question

有没有办法制作一个可编辑的 Vuetify 步进器，我可以在其中进行验证，以防止在验证不正确时单击另一个步骤的事件？

我尝试使用一些事件修饰符修改可编辑步进步骤的默认事件，例如在 Vuetify 事件之前创建一个事件，并在里面说是否要继续使用默认事件。

Answer 1

据我所知，您并不是指一旦满足某些条件就启用上一个/下一个操作。如果验证需要在服务器端进行，那么使用

v-btn

属性控制

disabled

或者只给它一个自定义处理程序将是微不足道的。您可能参考了步进器标头。

我只能想到一种解决方案 - 将标题拆分为单独的项目并单独控制

editable

属性。

<v-stepper v-model="currentStep" hide-actions>
  <v-stepper-header>
    <template v-for="(step, i) in steps">
      <v-divider v-if="i > 0" :key="i"></v-divider>
      <v-stepper-step
        :complete="currentStep > (i + 1)"
        :step="i + 1"
        :editable="i === 0 || steps[i - 1].completed"
        >{{ step.title }}</v-stepper-item
      >
    </template>
  </v-stepper-header>
</v-stepper>

export default {
  data () {
    return {
      currentStep: 1,
      selection: [],
      shipping: null,
      returnPolicyApproved: false,
    };
  },
  computed: {
    steps() {
      return [
        { title: 'Order', completed: this.selection.length > 0 },
        { title: 'Shipping', completed: this.selection.length > 0 && !!this.shipping },
        { title: 'Review', completed: this.returnPolicyApproved },
      ];
    },
  },
}

这里需要注意的是，步骤 2 的条件包含步骤 1 的条件。这意味着我们支持到达最后一步后，用户可以返回到第一步并进行一些更改的场景。这些更改可能会导致阻止步骤 2，但如果不重复该条件，步骤 3 仍然可以单击。

[
  { title: 'Step 1', completed: this.step1Valid },
  { title: 'Step 2', completed: this.step1Valid && this.step2Valid },
  { title: 'Step 3', completed:  this.step1Valid && this.step2Valid && this.step3Valid },
  // etc.
]

使用 Vuetify 3 的完整示例，但大部分与 Vuetify 2 兼容。