【Vue】dialog打开时重新渲染

你的名字 2024-03-17 16:04 89阅读 0赞

在 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 方法可能会被多次调用。如果重新渲染逻辑非常耗时，可能会造成性能问题。因此，建议在实现重新渲染逻辑时，尽可能避免出现问题。

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

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