In version 2 of Vue, why does the element dialog component display a gray overlay layer when two el-dialog components are displayed on the page at the same time?

May 31, 2023#vue2 #element #dialog #遮罩层282

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

In Vue 2, when using Element UI 2.x version and displaying two el-dialog components on a page, there may be an issue with the gray overlay. This is because the el-dialog component by default uses a global overlay to prevent user interaction with other page elements. To solve this problem, you can set the modal property of each el-dialog component to false, which will avoid the appearance of the global overlay. By setting the modal property to false for each el-dialog component, you can display multiple components without the gray overlay.

In Vue 2, when using Element UI 2.x version, if you display two el-dialog components on the page at the same time, there may be a problem with the gray overlay. This is because the el-dialog component by default uses a global overlay to prevent user interaction with other page elements. When multiple el-dialog components appear at the same time, the default global overlay will cause a gray overlay to appear.

To solve this problem, you can set the modal attribute to false for each el-dialog component, which will prevent the appearance of the global overlay. For example:

<template>
  <div>
    <el-dialog :visible="dialog1Visible" :modal="false">
      <!-- Dialog 1 content -->
    </el-dialog>
    
    <el-dialog :visible="dialog2Visible" :modal="false">
      <!-- Dialog 2 content -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialog1Visible: false,
      dialog2Visible: false
    }
  }
  // ...
}
</script>

By setting the modal attribute of each el-dialog component to false, you can display multiple el-dialog components at the same time without the gray overlay appearing.