当对话框的“×号”和 取消按钮都想调用同个消息提示关闭函数时,使用@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元素更新后再执行回调函数的内容,所以等对话框里的元素渲染完成后再获取就不会报错了,
原理
这个函数是一个异步函数,
- dom更新:在vue中,你修改了data的某一个值,并不会立即反应到该实例中。vue将你对data的更改放到watcher的一个队列中(异步),只有在当前任务空闲时才会去执行队列任务。
- 而
$nextTick
,这是一个异步事件,它会被放到队列当中。异步事件是不会立即执行的代码,会被js处理器放到一个队列里,按照队列的顺序优先级等一个个按次序执行,新添加的事件都会放在队列末尾。所以,当第一个data的修改执行渲染在页面之后,这个时候执行$nextTick。
(此部分总结来自知乎)