如何使用 Vuetify 在轮播的分隔符上方添加文本？

Question

我正在使用 Vue/Vuetify 并且需要将文本添加到轮播幻灯片以进行说明。我认为将文本放在分隔符上方和图像下方是放置它的最佳位置。我不想在图像上叠加文字。 Vuetify 文档没有为此提供任何示例。如何做到这一点？

Answer 1

您可以在 v-carousel-item 标签内制作自己的轮播设计，使用 vuetify 元素将文本放置在您想要的位置。 Example on cedepen

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
    <v-layout row wrap justify-center>
      <v-flex xs6>
         <v-carousel hide-delimiters>
          <v-carousel-item
            v-for="(item,i) in items"
            :key="i"  
          >
            <v-img
                    :src="item.src"
                   class="fill-height"
                  >
                    <v-container
                      fill-height
                      fluid
                      pa-0 ma-0

                    >
                      <v-layout fill-height align-end>
                        <v-flex xs12>
                          <v-card color="red" class="pa-2" >
                          <span class="headline white--text" v-text="item.src">                               </span>
                          </v-card>
                        </v-flex>
                      </v-layout>
                    </v-container>
                  </v-img>
             </v-carousel-item>
           </v-carousel>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

已更新

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
    <v-layout row wrap justify-center>
      <v-flex xs6>
         <v-carousel>
          <v-carousel-item
            v-for="(item,i) in items"
            :key="i"  
            :src="item.src"
          >

                    <v-container
                      fill-height
                      fluid
                      pa-0 ma-0 pb-3 

                    >
                      <v-layout fill-height align-end pb-4 mb-4>
                        <v-flex xs12>
                          <v-card color="red" class="pa-2">
                          <span class="headline white--text" v-text="item.src">                               </span>
                          </v-card>
                        </v-flex>
                      </v-layout>
                    </v-container>

             </v-carousel-item>
           </v-carousel>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

如何使用 Vuetify 在轮播的分隔符上方添加文本？

How to add text above the delimiters of a carousel using Vuetify?

carousel

vue.js

vuetify.js