Vuetify 删除对话框的框阴影

Question

我想去掉vuetify对话框的box-shadow。图像-->

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

但是当我添加带有框阴影 none 的 class 时，它不起作用。代码-->

    <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>

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

Answer 1

从这段代码可以看出，阴影是通过 .v-dialog 添加到元素上的 class，所以您向错误的元素添加了“无阴影”样式。

.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%);

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

编辑：如果你想删除对话框的覆盖，使用 hide-overlay prop

Answer 2

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

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

Answer 3

我知道有两种简单的方法可以从 v-dialog（和 v-menu）中删除 box-shadow。

1.全球：

<style>
.v-dialog {
  box-shadow: none;
}
</style>

2。具体v-dialog（更好的方式）：

<v-dialog content-class="elevation-0">
...
</v-dialog>

请注意，它必须是 content-class 而不是 class。如果你也想隐藏叠加层：

<v-dialog content-class="elevation-0" hide-overlay>
...
</v-dialog>

参考资料： v-dialog API, Vuetify Elevation helpers

Vuetify 删除对话框的框阴影

Vuetify remove dialog's box shadow

css

vue.js

vuetify.js