用文本验证垂直分隔线

Question

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

    |
   yeah
    |

Answer 1

试试这个：

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

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

Answer 2

你可以这样：

<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>

用文本验证垂直分隔线

Vuetify vertical divider with text

vue.js

vuetify.js