vue.js - 如何在Vue项目中实现地图拖拽缩放与Dialog对话框共存？

Question

大屏项目首页加载地图然后加载Dialog 对话框，展示一些信息。如何实现当Dialog 对话框没有关闭时地图也可以拖拽缩放。

页面

<ScaleScreen :width="1920" :height="1080" class="scale-wrap" :selfAdaption="$store.state.setting.isScale">    <div id="map" style="z-index: 2;">      <div id="marks" ref="marks"></div>      <div id="mycontrol" style="z-index: 1;position: absolute;width:28px;height:28px;" ref="mycontrol"        :class="[flag?'ol-full-screen ol-unselectable ol-control partMap':'ol-full-screen ol-unselectable ol-control fullMap']">        <button class="ol-full-screen-false" @click="testControl()">⤢</button>      </div>    </div>    <div id="butt" style="width: 110px; height: 110px; position: fixed;top: 10px;right: 50px;z-index: 1;">      <el-dialog :visible.sync="open_dw" width="20%" :modal="false" :append-to-body="true" :close-on-click-modal="false" v-dialogDrag :before-close="handleDialogClose">        <template slot="title">          <div class='dialog_title'>对话框</div>            <el-row>          <el-col :span="2" :xl="2" :lg="2" :md="2" :sm="12" :xs="24" style="min-height: 1px">          </el-col>          <el-col :span="5" :xl="5" :lg="5" :md="5" :sm="12" :xs="24">          <div class="gutter" :title="sssj_jcdmc">体温：{{sssj_jcdmc}}</div>          </el-col>            </el-row>        </template>      </el-dialog>    </div>  </ScaleScreen>

Answer 1

element ui里面有
close-on-click-modal是否可以通过点击 modal 关闭 Dialog
:close-on-click-modal="false"
modal 是否需要遮罩层
:modal="false"

Answer 2

在 Vue 项目中实现地图拖拽缩放与 Dialog 对话框共存的关键在于确保 Dialog 对话框不会阻止地图的交互事件。这通常涉及到 CSS 的 z-index 属性和 Vue 组件的交互处理。

首先，确保地图和 Dialog 对话框的 HTML 元素有正确的 z-index 设置。z-index 属性定义了元素的堆叠顺序，较高的值表示元素会出现在较低值元素的上方。在你的例子中，#map 和 #butt 中的 el-dialog 都有 z-index 设置，但需要确保 #map 的 z-index 高于 el-dialog。

其次，确保 Dialog 对话框在打开时不会阻止地图的交互事件。这通常可以通过在 Dialog 对话框上设置 :modal="false" 来实现，这样点击 Dialog 对话框外部的区域时不会关闭它。你的代码中已经设置了 :modal="false"，这是正确的。

最后，如果你的地图库（例如 OpenLayers）提供了事件处理机制，确保在 Dialog 对话框打开时不会取消或改变地图的事件监听器。

你的代码示例看起来已经考虑到了这些因素，因此应该能够实现地图拖拽缩放与 Dialog 对话框共存。如果仍然遇到问题，可能需要检查地图库的具体实现和事件处理机制，确保它们与 Vue 的事件系统兼容。

此外，确保你的 Vue 项目中没有其他地方在 Dialog 对话框打开时修改了地图的事件监听器或 z-index 设置。这可能会覆盖你的设置并导致问题。

综上所述，你的代码应该能够实现在 Dialog 对话框打开时，地图仍然可以拖拽缩放的功能。如果仍然遇到问题，建议检查地图库的具体文档和 Vue 的事件处理机制。