Element Plus Progress 组件实现动画进度条 - 100% 示例

<template>
  <div>
    <el-progress :percentage='percentage' :stroke-width='6' :color=''#409EFF'' :text-inside='true'></el-progress>
  </div>
</template>
<script>
import { ref } from 'vue';
import { ElProgress } from 'element-plus';

export default {
  components: {
    ElProgress,
  },
  setup() {
    const percentage = ref(0);

    const animate = () => {
      if (percentage.value < 100) {
        percentage.value += 1;
        setTimeout(animate, 20);
      }
    };

    setTimeout(animate, 1000);

    return {
      percentage,
    };
  },
};
</script>
<p>在这个示例中，我们使用了 Vue 3 和 Element Plus 库。我们使用了 <code>ElProgress</code> 组件来创建进度条。我们使用了 <code>percentage</code> 变量来跟踪进度条的完成百分比。</p>
<p>我们定义了一个 <code>animate</code> 函数，该函数每 20 毫秒增加 <code>percentage</code> 的值，直到它达到 100。我们使用 <code>setTimeout</code> 函数来定时调用 <code>animate</code> 函数，以便动画逐步完成。</p>
<p>最后，我们将 <code>percentage</code> 变量绑定到 <code>ElProgress</code> 组件的 <code>percentage</code> 属性中，以便显示进度条的完成百分比。我们还设置了 <code>stroke-width</code> 属性来定义进度条的宽度，<code>color</code> 属性来定义进度条的颜色，并将 <code>text-inside</code> 属性设置为 true，以便在进度条内部显示进度百分比。</p>