グレーのマスクを使用するプロセスで elementUI のダイアログ ボックスが表示されます。クリックしてマスクの問題の解決策を閉じます。

1. 問題表示

elementUI の Dialog ダイアログ ボックスの使用中にグレー マスクの問題が発生します。ポップアップ ボタンをクリックすると、ポップアップ フレームが表示されますが、強調表示されません。強調表示するには 1 回クリックする必要があります。次の図に示すように、ポップアップ フレーム領域:

公式ドキュメントのソリューションは次の図に示すとおりで、Dialog 自体が body 要素に挿入されるかどうかに関係なく、append-to-body 属性が提供されます。ネストされたダイアログでは、この属性を指定し、値 true を割り当てる必要があります。デフォルト値は false です。

2、コード部分

変更前のコード:

    <el-dialog title="添加信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>

変更されたコードは、el-dialog タグに     : append-to-body="true" を追加することです。

    <el-dialog title="添加信息" :visible.sync="dialogFormVisible" :append-to-body="true">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>

3. 成功したソリューションのデモンストレーション

マスクの問題が正常に解決されると、次の図が表示されます。ポップアップ ボックスをクリックして、マスクなしを直接強調表示します。