Vue dialog打开时重新渲染

在 Vue 中打开 dialog 常用的方法是使用 el-dialog 控件。当 dialog 打开时，常常需要重新渲染对应的内容。这个功能可以通过监听 visible 属性实现。

具体实现方法如下：

在 el-dialog 控件上监听 visible 属性

1.  
   <template>
2.  
   <el-dialog :visible.sync="dialogVisible" @visible-change="handleVisibleChange">
3.  
   <!-- 对话框内容 -->
4.  
   </el-dialog>
5.  
   </template>
6.  
    
7.  
   <script>
8.  
   export default {
9.  
   data() {
10.  
    return {
11.  
    dialogVisible: false
12.  
    };
13.  
    },
14.  
    methods: {
15.  
    handleVisibleChange(visible) {
16.  
    if (visible) {
17.  
    // 对话框打开时进行重新渲染
18.  
    }
19.  
    }
20.  
    }
21.  
    };
22.  
    </script>

在 handleVisibleChange 方法中实现重新渲染的逻辑

下面是一个渲染当前时间的示例代码：

1.  
   <template>
2.  
   <el-dialog :visible.sync="dialogVisible" @visible-change="handleVisibleChange">
3.  
   <p>当前时间是：{{ currentTime }}</p>
4.  
   </el-dialog>
5.  
   </template>
6.  
    
7.  
   <script>
8.  
   export default {
9.  
   data() {
10.  
    return {
11.  
    dialogVisible: false,
12.  
    currentTime: null
13.  
    };
14.  
    },
15.  
    methods: {
16.  
    handleVisibleChange(visible) {
17.  
    if (visible) {
18.  
    this.currentTime = new Date().toLocaleString();
19.  
    }
20.  
    }
21.  
    }
22.  
    };
23.  
    </script>

在这个例子中，当 dialog 显示时，handleVisibleChange 方法将重新渲染并更新 currentTime 的值。

需要注意的是，当 dialog 打开后，如果需要再次重新渲染对话框内容，handleVisibleChange 方法可能会被多次调用。如果重新渲染逻辑非常耗时，可能会造成性能问题。因此，建议在实现重新渲染逻辑时，尽可能避免出现问题。

有用请点赞，养成良好习惯！

疑问，交流，鼓励请留言！

这篇好文章是转载于：学新通技术网