使用 Vuetify 删除 v-stepper-header 编号答案

【问题标题】：Remove v-stepper-header number using Vuetify使用 Vuetify 删除 v-stepper-header 编号
【发布时间】：2019-12-10 04:54:20
【问题描述】：

我到处搜索试图解决这个问题，但没有找到任何解决方案。有什么方法可以从 v-steppper-header 中删除数字？ - Vuetify 版本：1.5.6

当前：

预期：

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

将step 属性设置为空字符串""，如下所示：

  <v-stepper-step :complete="e1 > 1" step="" complete>Name of step 1</v-stepper-step>

【讨论】：

谢谢！ vuetify docs中也有解释，没注意到?
使用这种方法意味着步骤的内容不会显示，因为它与步骤编号匹配
@Anjayluh 你能建议一个最好的方法吗？
我正在为 OP 用例提供答案，如果您需要其他行为，您可以发布问题，因为不赞成投票而不建议其他方法没有意义

【解决方案2】：

上述解决方案会导致活动/非活动类和步骤识别问题。我今天找到的问题较少的解决方案如下

.your-stepper-selector ::v-deep .v-stepper__step__step{ 字体大小：0 }

【讨论】：

【解决方案3】：

我找到了一种临时方法来处理这种情况。它并不理想，但到目前为止它给出了预期的结果。这是通过给字体一个透明的颜色，这样它就占据了背景颜色。这会在不显示步骤编号的情况下保留步骤功能

.v-stepper__step--active:not(.v-stepper__step--complete) .v-stepper__step__step {
    color: transparent;
}

【讨论】：

【解决方案4】：

.theme--light.v-stepper .v-stepper__step:not(.v-stepper__step--active):not(.v-stepper__step--complete):not(.v-stepper__step--error) .v-stepper__step__step {
    display: none;
}

【讨论】：