vue 对话框中实现loading效果

要在 Vue 对话框中实现 loading 效果，可以通过以下步骤实现：

1. 在 Vue 对话框组件中，定义一个数据属性 isLoading，用于控制 loading 效果的展示和隐藏。

2. 在对话框中添加一个 slot，用于展示 loading 效果。

3. 在对话框组件中，添加一个方法 showLoading，用于展示 loading 效果。在该方法中，将 isLoading 设置为 true。

4. 在对话框组件中，添加一个方法 hideLoading，用于隐藏 loading 效果。在该方法中，将 isLoading 设置为 false。

5. 在对话框组件中，通过 v-if 指令判断 isLoading 的值，来展示或隐藏 loading 效果的 slot。

下面是一个示例代码：

<template>
  <div>
    <el-dialog :visible.sync="dialogVisible">
      <template v-slot:title>
        {{ title }}
      </template>
      <template v-slot:default>
        <div v-if="!isLoading">
          <!-- 对话框内容 -->
        </div>
        <div v-else>
          <!-- loading 效果 -->
          <el-loading-spinner></el-loading-spinner>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      isLoading: false,
      title: '对话框标题',
    };
  },
  methods: {
    showLoading() {
      this.isLoading = true;
    },
    hideLoading() {
      this.isLoading = false;
    },
  },
};
</script>

在使用对话框时，调用 showLoading 方法展示 loading 效果，调用 hideLoading 方法隐藏 loading 效果即可。