在 Vue 中打开 dialog 常用的方法是使用 el-dialog 控件。当 dialog 打开时，常常需要重新渲染对应的内容。这个功能可以通过监听 visible 属性实现。
具体实现方法如下：
在 el-dialog 控件上监听 visible 属性
<template> <el-dialog :visible.sync="dialogVisible" @visible-change="handleVisibleChange"> <!-- 对话框内容 --> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false }; }, methods: { handleVisibleChange(visible) { if (visible) { // 对话框打开时进行重新渲染 } } } }; </script>
在 handleVisibleChange 方法中实现重新渲染的逻辑
下面是一个渲染当前时间的示例代码：
<template> <el-dialog :visible.sync="dialogVisible" @visible-change="handleVisibleChange"> <p>当前时间是：{{ currentTime }}</p> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false, currentTime: null }; }, methods: { handleVisibleChange(visible) { if (visible) { this.currentTime = new Date().toLocaleString(); } } } }; </script>
在这个例子中，当 dialog 显示时，handleVisibleChange 方法将重新渲染并更新 currentTime 的值。
需要注意的是，当 dialog 打开后，如果需要再次重新渲染对话框内容，handleVisibleChange 方法可能会被多次调用。如果重新渲染逻辑非常耗时，可能会造成性能问题。因此，建议在实现重新渲染逻辑时，尽可能避免出现问题。
