问题描述:
-
- 已经赋值成功,也没有任何报错
-
- 在弹出框的vm打印后dialogVisable为true,但是页面上不显示dialog
-
- element ui 对话框el-dialog关闭事件( ×号 ),点击取消后,弹框可以正常打开,但是点击X号以后,弹框就再也无法打开了
问题解决方案 1
如果你是VUE2.X,请检查你是否在:visible这个属性上加.sync,就像这样:visible.sync=“dialogVisble”,vue3应该是v-model的绑定方式,请去查文档~
<el-dialog title="弹框名字" :visible.sync="dialogVisable" @close="handleClose">
</el-dialog>
问题解决方案 2
- 增加配置::append-to-body=“true”
- 官方文档写的是:正常情况下,我们不建议使用嵌套的 Dialog,如果需要在页面上同时显示多个 Dialog,可以将它们平级放置。对于确实需要嵌套 Dialog 的场景,我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true,它就会插入至 body 元素上,从而保证内外层 Dialog 和遮罩层级关系的正确。
<el-dialog :visible.sync="dialogVisible" title="弹框名字" size="large" @close="handleCloseDialog" :append-to-body="true">
<p>这里是弹框内容</p>
<template v-slot:footer>
<div style="text-align: right">
<el-button @click="handleCloseDialog">关闭</el-button>
<el-button @click="handleSubmit" type="primary">确认</el-button>
</div>
</template>
</el-dialog>
问题解决方案 3
如果方案1没有解决,可以尝试将x号绑定和取消一样的方法来进行关闭
修改后:
问题解决方案 4
找到元素,手动在dom里面把mask的display改成show
- 今天就写到这里啦~
- 小伙伴们,( ̄ω ̄( ̄ω ̄〃 ( ̄ω ̄〃)ゝ我们明天再见啦~~
- 大家要天天开心哦
欢迎大家指出文章需要改正之处~
学无止境,合作共赢