让Dialog弹窗更加强大，不再被遮罩束缚

2022-12-30 15:12:41

掌控 Element-plus 中的 El-dialog 弹窗：释放遮罩的束缚

Element-plus 框架中的 El-dialog 弹窗组件以其强大性和灵活性而闻名，但有时你可能需要超越其默认设置。在这篇博文中，我们将深入探讨如何隐藏遮罩层，控制弹窗后的元素交互，以及掌握点击和滚动事件的处理。

抹除遮罩层

El-dialog 组件默认使用两个 div 元素来创建遮罩层，分别位于弹窗顶部和底部。要隐藏它们，只需将这些元素的 display 属性设置为 none：

<el-dialog :visible.sync="dialogVisible" @close="handleClose">
  <div class="dialog-content">
    <!-- 内容 -->
  </div>
</el-dialog>

<style>
  .el-dialog__wrapper {
    display: none;
  }
</style>

掌控弹窗后元素

默认情况下，El-dialog 将覆盖其后的所有元素。为了让这些元素在弹窗打开时仍然可交互，将组件的 modal 属性设置为 false：

<el-dialog :visible.sync="dialogVisible" @close="handleClose" :modal="false">
  <div class="dialog-content">
    <!-- 内容 -->
  </div>
</el-dialog>

驾驭弹窗后点击事件

要侦听弹窗后元素上的点击事件，为其添加事件监听器：

<div class="dialog-content" @click="handleDialogClick">
  <!-- 内容 -->
</div>

<script>
  export default {
    methods: {
      handleDialogClick() {
        // 点击弹窗后元素时执行的操作
      }
    }
  }
</script>

掌控弹窗后滚动事件

类似地，要处理滚动事件，添加滚动事件监听器：

<div class="dialog-content" @scroll="handleDialogScroll">
  <!-- 内容 -->
</div>

<script>
  export default {
    methods: {
      handleDialogScroll() {
        // 滚动弹窗后元素时执行的操作
      }
    }
  }
</script>