elementui dialog关闭遮罩还在---已解决

问题描述

项目中使用了el的dialog组件，点击关闭时偶尔会出现dialog关闭了遮罩还在的情况

原码：

<el-dialog
  title="tips"
  :visible.sync="dialogVisible"
  :show-close="false"
  :close-on-click-modal="false"
  :close-on-press-escape="false"
  width="20%"
  :modal-append-to-body='false'
>
  <div>
    <el-select v-model="selectYear">
      <el-option v-for="year in yearsArr" 
      :key="year.id" 
      :value="year.id" 
      :label="year.label">
      </el-option>
    </el-select>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button size="mini" type="primary" @click="confirmYear">确 定</el-button>
    <el-button size="mini" @click="closeDialog">取 消</el-button>
  </span>
</el-dialog>

解决方式：dialog将 append-to-body 设置为true

<el-dialog
  title="tips"
  :visible.sync="dialogVisible"
  :show-close="false"
  :close-on-click-modal="false"
  :close-on-press-escape="false"
  width="20%"
  :modal-append-to-body='false'
  :append-to-body="true"
>
  <div>
    <el-select v-model="selectYear">
      <el-option v-for="year in yearsArr" 
      :key="year.id" 
      :value="year.id" 
      :label="year.label">
      </el-option>
    </el-select>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button size="mini" type="primary" @click="confirmYear">确 定</el-button>
    <el-button size="mini" @click="closeDialog">取 消</el-button>
  </span>
</el-dialog>

参考 ：https://blog.csdn.net/weixin_42965737/article/details/114398845