进度条对话框

版权声明：1.版权归原作者Moment ° 回忆 ✨所有； 2.未经原作者允许不得转载本文内容，否则将视为侵权； 3.转载或者引用本文内容请注明来源及原作者； 4.对于不遵守此声明或者其他违法使用本文内容者，本人依法保留追究权等。 https://blog.csdn.net/qq_35366269/article/details/86083900

对话框组件 

<template>
  <el-dialog title="正在检测中......" :visible="isShowDialog" @close="hideData()" width="30%">
    <el-progress :text-inside="true" :stroke-width="18" :percentage="percentage"
                 status="success"></el-progress>
  </el-dialog>
</template>

<script>
  export default {
    name: "ProgressDialog",
    data() {
      return {
        percentage: 0,

      }
    },
    props: {
      isShowDialog: {
        type: Boolean,
        default: false,
      },
    },
    methods: {
      hideData() {
        this.$emit("hideDialog");
      },

      /**
       * 显示进度条百分比
       */
      showPercentage(){
        let this_ = this;
        let progressnuw =0;
        let timer = setInterval(() => {
          progressnuw++;
          if (progressnuw >= 100) {
            clearInterval(timer);
            this.$emit("complete")
          }
          this.percentage = progressnuw;
        }, 30)
      }
    },

    watch: {
      isShowDialog: function (newState) {
        if (newState) {
          this.showPercentage();
        }
      }
    }


  }
</script>

<style scoped>

</style>

调用示例：

      <progress-dialog
        :isShowDialog="isShowProgressDialog"
        v-on:hideDialog="isShowProgressDialog = false"
        @complete = "complete"
      ></progress-dialog>

效果图：