要素のダイアログがドラッグされ、ローカルで開かれます

序文

開発プロセス中、ポップアップ ウィンドウを開く必要があり、ポップアップ ウィンドウを特定の要素に部分的に表示する必要があります (現在のポップアップ ウィンドウを閉じずに他のページを開くため)。また、ダイアログドラッグできる必要があります。

解決策:

1. 現在のポップアップ ウィンドウを閉じずに他のページを開くことができます。

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

2. ダイアログをドラッグします。

基于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>