elementUI的Dialog对话框使用过程中出现灰色遮罩点击才关闭遮罩问题解决办法

一、问题展示

elementUI的Dialog对话框使用过程中出现灰色遮罩问题，点击弹出弹框按钮时，会显示弹框，但是不会高亮，还需要在点击一次弹框区域才会高亮，如下图：

官方文档解决方法如下图，里面提供了一个append-to-body的属性，Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true，默认值为false：

二、代码部分

修改前代码：

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

三、成功解决效果展示

成功解决遮罩问题显示如下图，点击弹出弹框直接高亮显示无遮罩：