union-question-web/src/components/ProgressDialog.vue

<template>
  <el-dialog
    class="progress-dialog"
    :visible.sync="modalIsShow"
    title="进度"
    top="10vh"
    width="300px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    append-to-body
  >
    <div class="progress-body">
      <div class="progree-desc">
        <slot></slot>
      </div>
      <el-progress
        v-if="modalIsShow"
        type="circle"
        :percentage="percentage"
      ></el-progress>
    </div>
    <div slot="title"></div>
    <div slot="footer"></div>
  </el-dialog>
</template>

<script>
export default {
  name: "ProgressDialog",
  props: {
    percentage: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      modalIsShow: false,
    };
  },
  methods: {
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
  },
};
</script>