写一个加载中的弹框 vue

好的，下面是一个简单的加载中的弹框 Vue 组件，使用了 Element UI 的 Loading 和 Dialog 组件：

<template>
  <div>
    <el-dialog :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-loading text="加载中" :full-screen="true"></el-loading>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false, // 是否显示弹框
    };
  },
  methods: {
    show() {
      // 显示弹框
      this.visible = true;
    },
    hide() {
      // 隐藏弹框
      this.visible = false;
    },
  },
};
</script>

在需要加载中的地方，可以使用该组件来展示加载中的弹框，例如：

<template>
  <div>
    <button @click="loadData">加载数据</button>
    <loading-dialog ref="loading"></loading-dialog>
  </div>
</template>

<script>
import LoadingDialog from './LoadingDialog.vue';

export default {
  components: {
    LoadingDialog,
  },
  methods: {
    async loadData() {
      // 显示弹框
      this.$refs.loading.show();

      try {
        // 加载数据
        // ...
      } catch (error) {
        // 加载数据失败
        // ...
      } finally {
        // 隐藏弹框
        this.$refs.loading.hide();
      }
    },
  },
};
</script>

这样，当点击“加载数据”按钮时，会显示加载中的弹框，等数据加载完成后，再隐藏弹框。