问题描述
项目中使用了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