vue.js - 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版本后就显示了

这篇关于vue.js - Element-UI的dialog弹窗的右上角的叉号和灰曾点击后都不能关闭弹窗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！