Vuetify删除对话框的阴影

k97glaaz 于 2023-11-21 发布在 Vue.js

关注(0)|答案(4)|浏览(127)

我想从vuetify的对话框中删除框阴影。该图像--> x1c 0d1x
在Chrome devTools中，如果我将box-shadow设置为无，它就可以工作。如下图所示。

但是当我添加一个没有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>

字符串
我该怎么办？先谢了。

vue.js

来源：https://stackoverflow.com/questions/69084179/vuetify-remove-dialogs-box-shadow

4条答案

按热度按时间

3j86kqsm1#

从这段代码中可以看出，阴影是用.v-dialog类添加到元素上的，所以你把“no-shadow”样式添加到了错误的元素上。

.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-overlay prop

赞(0）回复(0）举报 2023-11-21

s4n0splo2#

根据m4 n 0的建议，我发现我在v-dialog组件上使用的任何类都应用在v-application--wrap内的对话框中。但是正如你所看到的，在application--wrap之外，还有另一个v-dialog类出现。所以目前我从style中删除了scoped属性，它现在给了我想要的输出。也许瞄准类应该是一个更好的选择。我稍后会尝试。x1c 0d1x
我不确定这是一个故意的行为，还是我在某个地方犯了错误。

赞(0）回复(0）举报 2023-11-21

gorkyyrv3#

<v-dialog>
 <v-card class="elevation-0"> //<- this code use
 ...
 </v-card>
</v-dialog>

字符串

赞(0）回复(0）举报 2023-11-21

vvppvyoh4#

我知道有两种简单的方法可以从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

赞(0）回复(0）举报 2023-11-21

我来回答

Vuetify删除对话框的阴影

4条答案

相关问题

热门标签

最新问答