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

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の内容 -->
    </el-dialog>
    
    <el-dialog :visible="dialog2Visible" :modal="false">
      <!-- Dialog 2の内容 -->
    </el-dialog>
  </div>
</template>

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

各 el-dialog コンポーネントの modal 属性を false に設定することで、複数の el-dialog コンポーネントを同時に表示することができ、グレーシェードレイヤーが表示されることはありません。