css - Vuetify v-carousel 箭头重叠问题

Question

我遇到了 Vuetify v-carousel 的问题。左右箭头在左侧重叠的地方。
图片

Vue文件

<template>
  <v-card v-if="propertyThis">
    <v-carousel
      cycle
      hide-delimiters
    >
      <v-carousel-item
        v-for="(item,i) in propertyThis.pictures"
        :key="i"
        :src="item"
      />
    </v-carousel>

包.json 文件

  "dependencies": {
    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.3.0",
    "vue-router": "^3.1.3",
    "vuetify": "^2.1.0",
    "vuex": "^3.0.1",
    "vuex-class": "^0.3.2"
  },

我没有看到此页面上的代码有明显差异。如何解决？

任何帮助将不胜感激。

更新：

我注释掉了 .css 文件中的所有行以及 .vue 文件中的“样式”标签之间的所有行。但问题仍然存在。
这是页面中的 html 部分：

<div class="v-window__prev">
    <button type="button" class="v-btn v-btn--flat v-btn--icon v-btn--round theme--dark v-size--default" aria-label="Previous visual">
        <span class="v-btn__content">
            <i aria-hidden="true" class="v-icon notranslate mdi mdi-chevron-left theme--dark" style="font-size: 36px;"/>
        </span>
    </button>
</div>
<div class="v-window__next">
    <button type="button" class="v-btn v-btn--flat v-btn--icon v-btn--round theme--dark v-size--default" aria-label="Next visual">
        <span class="v-btn__content">
            <i aria-hidden="true" class="v-icon notranslate mdi mdi-chevron-right theme--dark" style="font-size: 36px;"/>
        </span>
    </button>
</div> 

我找不到任何明显错误的地方。

标签： cssvue.jsvuejs2frontendvuetify.js

Answer 1

好吧，我通过在 v-card 标签之前添加一个 v-app 标签解决了这个问题。

<template>
  <v-app>
    <v-card>
      ...
    </v-card>
  </v-app>
</template>

希望它可以帮助有类似问题的人。