Vuetify 带有文本的垂直分隔线

Question

我希望使用 vuetify 添加垂直分隔线以及中间的文本。我发现了这个link，它正在添加一个带有文本的水平分隔线。我尝试将代码修改为<v-row align="center"> <v-divider vertical></v-divider>yeah<v-divider vertical></v-divider> </v-row>，但无法获得所需的结果。任何帮助，将不胜感激。 期望的结果

    |
   yeah
    |

Answer 1

你可以这样做这样：

<v-row wrap no-gutters>
    <v-col cols="12" class="text-center">
        <v-divider vertical />
    </v-col>
    <v-col cols="12" class="text-center"> some </v-col>
    <v-col cols="12" class="text-center">
        <v-divider vertical />
    </v-col>
</v-row>

Answer 2

试试这个：

        <v-divider vertical class="mx-4"></v-divider>yeah<v-divider vertical class="mx-4"></v-divider>

由于您没有设置边距，因此分隔线正对着文本，因此很难看到。