Vuetify 对话框中的某些区域即使没有内容也不会关闭它

Question

在此处查看我的自定义灯箱组件的图片。

点击图片以外的任意位置或右侧的 v-sheet 组件（顺便说一下，是应该触摸图像，但我不知道如何在不使用边距的情况下移动它。

不幸的是，红框存在 - 它们是单击应该关闭对话框的区域，但实际上没有。这是因为整个 Dialog 组件都是绿色框 - 它认为即使那些红色框区域也是组件的一部分。

我一直在尝试尽可能使用 @click 和 v-click-outside 指令来尝试排除图像，并且可以单击 sheet 组件，但其他所有内容都会关闭对话框，但不幸的是，我只会得到根本无济于事的奇怪行为。

此外，我发现使用 margin: auto 会创建另一个无法点击的区域，所以我需要找到另一种方法来移动它。

Source Code

Answer 1

选项 1：使用 flexbox 和 @click 功能关闭任何内容

基本上，如果您让 css 进行类似的布局，但用 background: blue 填充那些红色框，您又可以在相同的 div 上放置 @click ，这将关闭您需要的任何内容。

选项 2：使用模态框

我会使用与“图像组件”和“图像细节组件”通信的父组件（这样这两个组件就是同级组件。

此外，我个人会为这两个同级组件使用 v--modal，并将 closed 事件绑定到按名称关闭两个模态的单个实例

shiftX 和 shiftY 应该足够放置。 https://www.npmjs.com/package/vue-js-modal

Answer 2

问题 1：

"is supposed to be touching the image, but I can't figure out how to move it without using margin"

您可以使用 lg="auto" 而不是第一个列的 lg="10"，这样它会缩小以适合其内容。

          justify="center"
          class="fill-height"
        >
          <v-col
-           lg="10"
+           lg="auto"
            md="12"
            offset-lg="0"
            class="fill-height text-right"
          >

问题 2：

"areas where clicking should close the dialog, but don't"

您可以在对话框主体上使用 pointer-events: none 来禁用点击事件捕获，然后在特定元素上使用 pointer-events: auto 以选择性地启用它。

          <v-col
            lg="2"
            md="4"
            align-self="top"
-           @click="dialog = false"
          >
            <v-sheet
              class="rounded-tr-lg text-left"

...

- <style lang="scss">
- .v-dialog {
+ <style lang="scss" scoped>
+ ::v-deep .v-dialog {
    margin: 0;
    padding-left: 24px;
    padding-right: 24px;
    box-shadow: none !important;
+   pointer-events: none;
+ }
+ .v-image,
+ .v-btn,
+ .v-sheet {
+   pointer-events: auto;
  }
  </style>

Vuetify 对话框中的某些区域即使没有内容也不会关闭它

Some areas inside the Vuetify Dialog box don't close it even if there is no content there

vue.js

modal-dialog

vuetify.js

vue-directives

选项 1：使用 flexbox 和 @click 功能关闭任何内容

选项 2：使用模态框

问题 1：

问题 2：