当前位置：首页 > news >正文

Vue3+Element Plus：使用el-dialog，对话框可拖动，且对话框弹出时仍然能够在背景页（对话框外部的页面部分）上进行滚动以及输入框输入信息

news 2024/11/17 11:27:41

【需求】
使用Element Plus中的el-dialog默认是模态的（即它会阻止用户与对话框外部的元素进行交互），对话框弹出时仍然能够在背景页（对话框外部的页面部分）上进行滚动以及输入框输入信息，且对话框可拖动

【思路】

设置el-dialog属性draggable为true，开启可拖动功能
设置el-dialog属性modal为false，关闭遮罩层样式
设置el-dialog属性lock-scroll为false，在 Dialog 出现时将 body 解除滚动锁定
设置el-dialog属性close-on-click-modal为false，不可以通过点击 modal 关闭 Dialog
添加el-dialog属性modal-class，遮罩的自定义类名，设置为pointer-events: none
添加el-dialog属性class，Dialog 的自定义类名，设置为pointer-events: auto

【示例代码】

<template><el-button plain @click="dialogVisible = true">打开弹出框</el-button><ul><li>6</li><li>6</li><li>6</li><li>6</li><li>6</li><li><el-input v-model="backgroundInput" placeholder="在背景页输入"></el-input></li><li>6</li><li>6</li><li>6</li><li>6</li><li>6</li><li>6</li><li>6</li><li>6</li><li>6</li><li>6</li><li>6</li><li>6</li><li>6</li><li>6</li><li>6</li><li>6</li><li>6</li><li>6</li><li>6</li><li>6</li><li>6</li><li>6</li></ul><div><el-dialogv-model="dialogVisible"title="标题"width="500"draggable:modal="false":lock-scroll="false":close-on-click-modal="false"modal-class="modal-wrap"class="dialog-wrap"><span>content区域</span><template #footer><div class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="dialogVisible = false">确定</el-button></div></template></el-dialog>
</div>
</template><script lang="ts" setup>
import { ref } from 'vue'const dialogVisible = ref(false)
const backgroundInput = ref('')</script>
<style scoped>
:deep(.modal-wrap) {pointer-events: none !important;
}
:deep(.dialog-wrap) {pointer-events: auto !important;
}
</style>