Vuetify 移除对话框的框阴影答案

【问题标题】：Vuetify remove dialog's box shadowVuetify 移除对话框的框阴影
【发布时间】：2021-11-04 02:42:01
【问题描述】：

我想从 vuetify 的对话框中移除 box-shadow。那个图片-->

在 chrome devTools 中，如果我将 box-shadow 设置为 none，它会起作用。就像下图一样。

但是当我添加一个没有 box-shadow 的类时，它不起作用。代码-->

    <v-dialog
      v-model="assignedPRPaneldialog"
      width="700"
      content-class="vDialog"
    >
      <v-card v-if="GET_PRESS_RELEASE_ASSIGNED_DATA.length > 0">
        <!-- {{ GET_PRESS_RELEASE_ASSIGNED_DATA }} -->
        <v-card
          v-for="(item, i) in GET_PRESS_RELEASE_ASSIGNED_DATA"
          :key="i"
          class="pa-2"
          outlined
        >
          <CardPr :simple="true" :item="item" />
        </v-card>
      </v-card>
      <v-card v-else>
        <v-alert border="bottom" colored-border type="warning" elevation="0">
          No Press Release yet.
        </v-alert>
      </v-card>
   </v-dialog>
<style lang="scss" scoped>
  div.vDialog {
     box-shadow: none;
  }
</style>

我应该在这里做什么？提前致谢。

【问题讨论】：

这就是我在演示中删除它的方式：codepen.io/Manoj6994/pen/vYZyzZK nimb.ws/4o3vpB 定位.v-dialog 就足够了，但我使用了一个 ID，以便它适用于该特定对话框。
谢谢。您的建议使我走上了正确的道路

标签： css vue.js vuetify.js

【解决方案1】：

按照 m4n0 的建议，我发现我在 v-dialog 组件上使用的任何类都在 v-application--wrap 内的对话框中应用。但正如您在应用程序外部看到的那样，出现了另一个 v-dialog 类。所以目前我从 style 中删除了 scoped 属性，它现在给了我想要的输出。可能以班级为目标应该是一个更好的选择。我稍后会尝试。

我不确定这是有意的行为还是我在某处犯了错误。

【讨论】：

【解决方案2】：

从这段代码可以看出，阴影被添加到具有 .v-dialog 类的元素上，因此您将“无阴影”样式添加到错误的元素。

.v-dialog {
border-radius: 6px;
margin: 24px;
overflow-y: auto;
pointer-events: auto;
transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
width: 100%;
z-index: inherit;
box-shadow: 0px 11px 15px -7px rgb(0 0 0 / 9%), 0px 24px 38px 3px rgb(0 0 0 / 5%), 0px 9px 46px 8px rgb(0 0 0 / 3%);

您可以将您的类直接添加到<v-dialog> 组件，或使用elevation-0 类。

编辑：如果要删除对话框的覆盖，请使用hide-overlayprop

【讨论】：

hide-overlay 不会移除阴影。它给出了一个白色的阴影。我希望灰色阴影消失。海拔-0 在这里没有任何改变。我使用了内联样式，它也没有删除阴影。我在这里没有得到错误的元素部分。因为我使用了 vDialog 类。但是如果您查看元素图像，我的课程会显示在元素中。所以我认为它应该适用
@HimuraDaBattosuai 阴影和覆盖是两个不同的东西，我不确定你的目标是什么。我经常在 m4n0 的 codepen 示例中使用自定义 CSS。在我的回答中，我写道，如果您想从对话框中删除阴影，您应该定位正确的 HTML 元素，因为您将 CSS 属性添加到错误的元素。最后那是你的解决方案;)