如何将Vuetify Carousel轮播组件的左右箭头向上移动

你之前的方案失效有两个核心原因：

1. 插槽为虚拟占位节点，直接在<template>标签上绑定class不会挂载到真实渲染的箭头DOM上
2. scoped样式默认无法作用到子组件内部的Vuetify原生类，需要用深度选择器穿透

方案1：深度选择器修改原生类（最简便） #

首先给<v-carousel>添加自定义类避免全局样式污染：

<v-carousel
  hide-delimiters
  height="100%"
  class="custom-carousel"
>
  <!-- 原有carousel-item代码保持不变 -->
</v-carousel>

然后添加scoped样式，根据你使用的Vue版本选择对应写法：

<style lang="scss" scoped>
/* Vue3 写法 */
:deep(.custom-carousel .v-window__prev),
:deep(.custom-carousel .v-window__next) {
  top: 0;
  /* 若需要调整偏移量可搭配transform，默认值为translateY(-50%) */
  /* transform: translateY(0); */
}

/* Vue2 写法二选一即可 */
/* ::v-deep .custom-carousel .v-window__prev,
::v-deep .custom-carousel .v-window__next {
  top: 0;
} */

/* 也可使用/deep/写法 */
/* /deep/ .custom-carousel .v-window__prev,
/deep/ .custom-carousel .v-window__next {
  top: 0;
} */
</style>

方案2：自定义插槽完全控制箭头样式 #

重写 prev/next 插槽，手动绑定事件属性，直接给自定义按钮加类：

<v-carousel
  hide-delimiters
  height="100%"
>
  <!-- 自定义左箭头插槽 -->
  <template v-slot:prev="{ on, attrs }">
    <v-btn v-bind="attrs" v-on="on" class="custom-carousel-arrow">
      <v-icon>mdi-chevron-left</v-icon>
    </v-btn>
  </template>
  <!-- 自定义右箭头插槽 -->
  <template v-slot:next="{ on, attrs }">
    <v-btn v-bind="attrs" v-on="on" class="custom-carousel-arrow">
      <v-icon>mdi-chevron-right</v-icon>
    </v-btn>
  </template>

  <!-- 原有carousel-item代码保持不变 -->
  <v-carousel-item
    v-for="(item,i) in yearsMonthsUsed"
    :key="i"
  >
    <!-- 原有内容 -->
  </v-carousel-item>
</v-carousel>

对应样式：

<style lang="scss" scoped>
.custom-carousel-arrow {
  top: 0;
  /* 可自行添加其他样式调整大小、颜色等 */
}
</style>

注意事项 #

如果样式不生效可按F12审查箭头元素的实际类名，不同Vuetify版本类名可能存在细微差异，替换为实际类名即可。

内容的提问来源于stack exchange，提问作者EmiliOrtega