Vuetify v-carousel 箭头重叠问题答案

【问题标题】：Vuetify v-carousel arrows overlapping problemVuetify v-carousel 箭头重叠问题
【发布时间】：2020-04-12 09:26:30
【问题描述】：

我遇到了 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>

package.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"
  },

我没有看到与this page 上的代码有明显区别。如何解决？

任何帮助将不胜感激。

更新：

我注释掉了 .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>

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

【问题讨论】：

你有自定义的css吗？
我建议通过您的浏览器开发工具检查元素，看看您的 css 是否会覆盖组件。

标签： css vue.js vuejs2 frontend vuetify.js

【解决方案1】：

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

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

希望它能帮助遇到类似问题的人。

【讨论】：