elementui遇到的问题 ——el-dialog

当对话框的“×号”和 取消按钮都想调用同个消息提示关闭函数时，使用@close出现错误

问题

会出现，你点取消后触发一次消息提示，然后你点确定关闭后，会再次触发对话框的close事件，这样你就会两次有消息提示了。

原因

由于你点取消的时候出现消息提示后，点击“确定”，即会关闭弹窗，所以会触发@close事件

解决方式

可以通过这样解决：

        <el-dialog
            title="修改摄像头相关信息"
            :visible="dialogVisible"
            style="text-align: center"
            @open="openDialog"
            :before-close="closeDialog"  
            //将@close改为before-close，before-close是在关闭前的回调，会暂停 Dialog 的关闭
                                         
          //这样在关闭前调用这个确定关闭的提示后，进行关闭，又在点击取消关闭后，也调用那个确定关闭的提示，但这是已经没有@close事件了
\\>
        </el-dialog>

打开对话框的点击事件里获取不到el-dialog组件的子标签

原因

由于el-diolog里的组件还没加载完成，因此此时获得的标签为null，

解决方式

可以将获取元素放在函数里，等加载后获取

this.$nextTick(() => {
                    var dom = document.getElementById('analysisEcharts');
                    console.log(dom)
}

this.$nextTick这个函数是在当dom元素更新后再执行回调函数的内容，所以等对话框里的元素渲染完成后再获取就不会报错了，

原理

这个函数是一个异步函数，

1. dom更新：在vue中，你修改了data的某一个值，并不会立即反应到该实例中。vue将你对data的更改放到watcher的一个队列中（异步），只有在当前任务空闲时才会去执行队列任务。
2. 而$nextTick，这是一个异步事件，它会被放到队列当中。异步事件是不会立即执行的代码，会被js处理器放到一个队列里，按照队列的顺序优先级等一个个按次序执行，新添加的事件都会放在队列末尾。所以，当第一个data的修改执行渲染在页面之后，这个时候执行$nextTick。
   (此部分总结来自知乎)