Vuetify 3 V-Stepper 插槽接头

Question

在 vuetify 3 中创建 v-stepper 本质上有两种方法。您可以使用属性或模板/插槽。

我无法使用属性方法，因为由于某种原因，过渡被搞乱了（从一个步进窗口到下一个窗口的过渡不能顺利地从左到右移动，等等）。如果您知道如何修复此问题或者这是一个将被修复的错误，那也很棒。

使用插槽，过渡工作正常，但是我现在需要能够控制 v-stepper 标头，以便我可以更改颜色并更改步骤以完成。如何在 vuetify 3 中使用 v-stepper-header 插槽？我找不到有关如何执行此操作的示例。

老虎机版本

<v-stepper 
editable
:items="['Step 1', 'Step 2', 'Step 3']"
non-linear
>            
     <!-- How do I add a template for the header here and control whether its complete or not and color -->
    <template v-slot:item.1>
        <span>Step Window 1</span>
    </template>
    
    <template v-slot:item.2>
        <span>Step Window 2</span>
    </template>

    <template v-slot:item.3>
        <span>Step Window 3</span>
    </template>
</v-stepper>

属性版本

<v-stepper>
    <v-stepper-header>
    <v-stepper-item
        complete
        editable
        title="Step 1"
        value="1"
    ></v-stepper-item>

    <v-divider></v-divider>

    <v-stepper-item
        complete
        editable
        title="Step 2"
        value="2"
    ></v-stepper-item>

    <v-divider></v-divider>

    <v-stepper-item
        editable
        title="Step 3"
        value="3"
    ></v-stepper-item>
    </v-stepper-header>

    <v-stepper-window>
        <v-stepper-window-item
            value="1"
        >
            <span>Step Window 1</span>
        </v-stepper-window-item>
    </v-stepper-window>

    <v-stepper-window>
        <v-stepper-window-item
            value="2"
        >
            <span>Step Window 2</span>
        </v-stepper-window-item>
    </v-stepper-window>

    <v-stepper-window>
        <v-stepper-window-item
            value="3"
        >
            <span>Step Window 3</span>
        </v-stepper-window-item>
    </v-stepper-window>
</v-stepper>

更新： 正如评论中的 yoduh 所指出的，我在上面的属性版本中对窗口的结构进行了混乱。窗口的正确结构如下。如果有人知道标头的插槽如何工作并且可以分享如何修改“完成”值（如果可能），我将留下这个问题。

属性版本 -- 已更正

<v-stepper>
    <v-stepper-header>
    <v-stepper-item
        complete
        editable
        title="Step 1"
        value="1"
    ></v-stepper-item>

    <v-divider></v-divider>

    <v-stepper-item
        complete
        editable
        title="Step 2"
        value="2"
    ></v-stepper-item>

    <v-divider></v-divider>

    <v-stepper-item
        editable
        title="Step 3"
        value="3"
    ></v-stepper-item>
    </v-stepper-header>

    <v-stepper-window>
        <v-stepper-window-item
            value="1"
        >
            <span>Step Window 1</span>
        </v-stepper-window-item>
 
        <v-stepper-window-item
            value="2"
        >
            <span>Step Window 2</span>
        </v-stepper-window-item>
  
        <v-stepper-window-item
            value="3"
        >
            <span>Step Window 3</span>
        </v-stepper-window-item>
    </v-stepper-window>
</v-stepper>

Answer 1

header

插槽有点令人困惑，因为它并不指整个标题，而只是指常规标题下方的空间，即图标、标题和副标题下方的空间（具体位置请参阅代码）。它用于没有特定

header-item.${item.value}

插槽（code）的每个标题项。

从 Vuetify 3.4 开始，使用插槽时不会设置

hasCompleted

属性。它要求 v-stepper-item 将

completed

属性设置为 true 或

rules

属性设置并满足，但两者都不是从 v-stepper 传递的。我认为这是一个错误，这些道具应该从项目对象设置。

长话短说，现在，您必须直接使用组件。