vue.js实现同时弹出多个div，并移动弹框位置。

最新推荐文章于 2024-08-01 12:56:26 发布

Beam007

最新推荐文章于 2024-08-01 12:56:26 发布

阅读量5.9k

点赞数 7

分类专栏： vue

本文链接：https://blog.csdn.net/Beam007/article/details/104920211

版权

本文介绍了如何在Vue.js中实现同时弹出多个div详情框，用于设备详情对比查看。通过动态渲染div而非使用el-dialog，解决了一层层弹出和层级关系的问题。文章强调了onmousemove和onmouseup事件处理的位置、z-index的处理、.multi-dialog样式的设置以及动态渲染div时key的正确绑定，特别是key绑定的注意事项，避免因数组操作导致的渲染错误。

摘要由CSDN通过智能技术生成

需求

同一界面多个设备，需要点击查看详情，且可以同时点开多个div详情框，进行详情数据对比查看。

效果

在这里插入图片描述

思考

最初考虑通过el-dialog实现，但是怎么尝试设置属性，都只能一层层弹出，切存在蒙版层难以设置div的层级关系，无法同时弹出多个对话框切换使用。
最后考虑通过v-for控制div的动态渲染来实现。

关键代码

点击设备按钮和div动态渲染部分

<div class="just-click" @click="clickRect('101')" style="left:200px;top:300px;">101</div>
<div class="just-click" @click="clickRect('102')" style="left:400px;top:300px;">102</div>
<div class="just-click" @click="clickRect('103')" style="left:600px;top:300px;">103</div>
<!-- 动态渲染弹出框 -->
<div v-for="devOne in devDialogs" :key="devOne.devCode" class="multi-dialog" :id="devOne.box" :style="{left: devOne.left, top: devOne.top}">
  <div class="multi-dialog-title" :id="devOne.title">
    <span>{
  { devOne.devCode }}</span>
    <button type="butto