前言

开发过程中，遇到了需要打开弹窗，并且弹窗要在某个元素内局部显示（为了可以打开别的页面，然后又不关闭当前弹窗），并且需要可以拖动dialog。

解决思路：

1、可以打开别的页面而不关闭当前弹窗：

设置 keep-alive， 在路由中将当前组件的 keep-alive 属性设置为true，即可不销毁组件

2、拖动 dialog：

基于vue3的element-plus有一个 draggable 属性，如果是element-ui，拖动则需要手动写一个拖动（后续有空补）

3、让弹窗局部显示：

在外层加个div，修改el-overlay类名的position为absolute即可，具体代码如下

<template>
  <div class="box">
    <el-button text @click="dialogVisible = true"> 点击打开弹窗 </el-button>

    <el-dialog v-model="dialogVisible" title="Tips" width="60%" draggable>
      <span>这是一个可以拖动的弹窗,让弹窗只能局部显示</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {
    
     ref } from "vue";

const dialogVisible = ref(false);
</script>

<style>
.box {
    
    
  height: 600px;
  width: 600px;
  background-color: antiquewhite;
  position: relative !important;
}
.el-overlay {
    
    
  /* 主要代码 */
  position: absolute !important;
}
.el-overlay-dialog {
    
    
  /* 我定义了与父元素一样的宽度 */
  width: 600px;
  top: unset;
  right: unset;
  bottom: unset;
  left: unset;
  overflow: visible !important;
}
</style>