Element-UI的dialog弹窗的右上角的叉号和灰曾点击后都不能关闭弹窗

我创建了一个新的vue项目,然后安装了element-ui,启动项目后,在App.vue文件里写入了如下代码:

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog title="提示" :visible="dialogVisible" size="tiny" >
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

运行后效果如下:

图片描述

后来发现,不管叉号关闭不了,而且就连设置了点击灰层关闭弹窗的属性也无效
我使用的是vue-cli
我的vue依赖包是版本@2.2.6
我的element-ui的依赖包版本是@1.3.3
在QQ群里有人说可能是element-ui版本的问题,后来我试了很多版本依然不行。
对了,还有一个问题,就是我的弹窗在我电脑上可以弹出来,但是在同事的电脑上弹不出来,除非是npm run build后才能在他的电脑上弹出弹窗。
请问:
1、为什么点击叉号和灰层不能关闭弹窗?
2、为什么在我电脑能弹出的弹窗到同事电脑上弹不出来了?
在线等,挺急的。。。

回答:

    <el-dialog title="" :visible.sync="dialogTableVisible" :before-close="ai_dialog_close">
        <el-tree
            :data="gridData"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="tree"
            :default-checked-keys="defaulttreevalue"
            highlight-current
            :props="defaultProps">
        </el-tree>
    </el-dialog>
    ===================
    ai_dialog_close(){
            this.dialogTableVisible = false;
        },
        
    ==============================

还有查看下版本,之前1.2.9版本,死活不显示弹窗。更新1.3.1版本后就显示了

回答:

你少了异步的这个

:visible.sync="dialogVisible"

回答:

上面说的不全面,是我这边出现是因为冒泡的原因。
提到冒泡的,懂得自然懂。

回答:

我也遇到了同样的问题,确实是事件冒泡了

回答:

我的也是一样,关键还是有些页面的可以,有些不行。弹窗代码都差不多。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注