前言
开发过程中,遇到了需要打开弹窗,并且弹窗要在某个元素内局部显示(为了可以打开别的页面,然后又不关闭当前弹窗),并且需要可以拖动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>