如何从 vuetify 轮播中向上移动箭头

Posted 2023-02-16

【中文标题】如何从 vuetify 轮播中向上移动箭头

【英文标题】：how to move arrows up from vuetify carousel

【发布时间】：2021-12-01 11:19:36

【问题描述】：

我有下一个用 vuetify 制作的轮播，我需要向上移动两个箭头，为此我需要在 v-window__next 和 v-window__prev 类中都有一个 top:0，但我不知道如何将属性赋予组件

这是一段代码

                  <v-carousel
                    hide-delimiters
                    
                  >
                    <v-carousel-item
                      v-for="(item,i) in yearsMonthsUsed"
                      :key="i"
                    >
                      <v-row
                        class="ma-0"
                        align="center"
                        justify="center"
                      >
                        <v-col
                          cols="12"
                          sm="12"
                          align="center"
                          justify="center"
                        >
                          <div class="text-h6">
                             item.annio 
                          </div>
                        </v-col>
                        <v-col
                          cols="12"
                          sm="1"
                          v-for="mes in meses"
                          :key="mes.mes"
                        >
                          <v-btn
                            fab
                            depressed
                            x-small
                            :color="pickColor(item.annio,mes.cod)"
                            :class="'disable-events': true"
                          >
                            <v-icon>
                               mdiCalendar 
                            </v-icon>
                          </v-btn>
                           mes.mes.substr(0, 3) 
                        </v-col>
                      </v-row>
                    </v-carousel-item>
                  </v-carousel>

我尝试像这样在 v-carousel 中添加 Slots

 <template v-slot:next=" on, attrs " :class="myClas" />

<style lang="scss" scoped>
  .myClas 
  top: 0;

</style>

但是没用

【参考方案1】：

您可以为v-carousel 分配一个类并从那里设置箭头的样式。

<v-carousel class="myCarousel"><!-- content --></v-carousel>

<style>
.myCarousel .v-window__prev, .myCarousel .v-window__next 
  top: 0;

</style>