进度条对话框

最新推荐文章于 2023-06-21 09:31:59 发布

郭宝

最新推荐文章于 2023-06-21 09:31:59 发布

阅读量353

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/qq_35366269/article/details/86083900

Web前端专栏收录该内容

284 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

这篇博客介绍了如何利用对话框组件创建一个带有进度条的功能，提供了具体的调用示例，并展示了实际效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对话框组件

<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(() =>