vueバージョン2では、ページに2つのel-dialogコンポーネントを同時に表示すると、なぜ1つの灰色のマスクレイヤーが表示されるのですか？

Vue 2 では、Element UI 2.x バージョンを使用する際に、ページに 2 つの el-dialog コンポーネントを同時に表示すると、灰色のマスクレイヤーの問題が発生する可能性があります。これは、el-dialog コンポーネントがデフォルトでは他のページ要素とのインタラクションを阻止するためにグローバルなマスクレイヤーを使用するためです。複数の el-dialog コンポーネントが同時に表示されると、デフォルトのマスクレイヤーがグローバルであるため、灰色のマスクレイヤーが表示される可能性があります。

この問題を解決するには、各 el-dialog コンポーネントの modal 属性を false に設定することで、グローバルマスクレイヤーを回避できます。例：

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

各 el-dialog コンポーネントの modal 属性を false に設定することで、複数の el-dialog コンポーネントを同時に表示し、灰色のマスクレイヤーが表示されないようにすることができます。