【问题标题】：Some areas inside the Vuetify Dialog box don't close it even if there is no content thereVuetify 对话框中的某些区域即使没有内容也不会关闭它
【发布时间】：2021-10-16 06:27:23
【问题描述】：

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

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

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

我一直在尝试使用 @click 和 v-click-outside 指令来尝试排除图像，并且可以单击工作表组件，但其他所有操作都会关闭对话框，但不幸的是，我只会得到奇怪的行为一点帮助都没有。

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

Source Code

【问题讨论】：

标签： vue.js modal-dialog vuetify.js vue-directives

【解决方案1】：

问题一：

“应该是触摸图像，但我不知道如何在不使用边距的情况下移动它”

您可以使用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：

“点击应该关闭对话框的区域，但不要”

您可以在对话框主体上使用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>

【讨论】：

【解决方案2】：

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

基本上，如果你让你的 css 做一个类似的布局，但用 background: blue 填充那些红色框，你反过来可以在同一个 div 上放置一个 @click，这将关闭你需要的任何内容。

选项 2：使用模态

我会使用与“图像组件”和“图像详细信息组件”通信的父组件（这样两个组件就是兄弟组件。

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

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

【讨论】：