前端页面中使用进度条

2023/8/22
阅读时间 2 分钟

近日见闻

原定9月2日举办的Ceph Days China活动将推迟至12月份与OpenInfra Days China一同举办。相关后续筹备情况，请持续关注！–ceph开源社区
kpack加入了Buildpacks社区组织 –LFAPC
Volcano 社区 v1.8.0 版本正式发布，Volcano是业界首个云原生批量计算项目，于2019年6月在上海 KubeCon 正式开源，并在2020年4月成为 CNCF 官方项目。2022年4月，Volcano 正式晋级为CNCF 孵化项目。 –容器魔方
忙碌是治疗不悦的良药 –近日有感

如何使用elmentplus中的进度条

总的来说，最常用的一个是直线进度条，一个就是环形进度条,用好这俩个，基本能应付常用场景了。

所以先看看官网给的例子：

直线进度条

<template>
  <div class="demo-progress">
    <el-progress :percentage="50" />
    <el-progress :percentage="100" :format="format" />
    <el-progress :percentage="100" status="success" />
    <el-progress :percentage="100" status="warning" />
    <el-progress :percentage="50" status="exception" />
  </div>
</template>

<script lang="ts" setup>
const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
</script>

<style scoped>
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  width: 350px;
}
</style>

环形进度条

<template>
  <div class="demo-progress">
    <el-progress type="circle" :percentage="0" />
    <el-progress type="circle" :percentage="25" />
    <el-progress type="circle" :percentage="100" status="success" />
    <el-progress type="circle" :percentage="70" status="warning" />
    <el-progress type="circle" :percentage="50" status="exception" />
  </div>
</template>
<style scoped>
.demo-progress .el-progress--circle {
  margin-right: 15px;
}
</style>

再来看看那API属性，这里只有一个参数是必填的：

percentage 就是百分比的意思，类型为number，默认值为0

其余参数根据需要选择，比如宽度、动画、背景色。

那么原理是什么呢？

通过HTML元素、CSS样式和JavaScript交互的结合来达到展示和更新进度的效果。

关键概念

容器元素用于包含进度元素，并通过其宽度来表示当前的进度。

进度元素则是通过改变其宽度来展示实际的进度。

通过原生js看：

HTML结构：

<div class="progress-container">
  <div class="progress-bar" id="progress"></div>
</div>

CSS 样式

.progress-container {
  width: 80%;
  max-width: 400px;
  border: 2px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.progress-bar {
  width: 0;
  height: 30px;
  background-color: #4caf50;
  transition: width 0.3s ease-in-out;
}

JavaScript 交互

const progressBar = document.getElementById("progress");
const startButton = document.getElementById("startButton");

startButton.addEventListener("click", () => {
  let progress = 0;
  const interval = setInterval(() => {
    progress += 10;
    if (progress <= 100) {
      progressBar.style.width = `${progress}%`;
    } else {
      clearInterval(interval);
    }
  }, 500);
});

要涉及以下几个方面：

数据更新和控制：进度条组件需要获取任务的进度值数据，这可以通过外部传入的数据属性或组件内部状态来实现。Element Plus 的进度条组件可以通过 :percentage 属性来控制进度的百分比。

界面元素的渲染：进度条的可视化效果是通过 HTML 元素和 CSS 样式来实现的。Element Plus 的进度条组件会根据传入的进度值，动态计算并设置进度条的宽度、填充颜色等样式属性。

CSS 样式控制：进度条的填充效果是通过 CSS 中的渐变（Gradient）或宽度来实现的。Element Plus 的进度条组件使用 CSS 样式来控制进度条的外观，例如，进度条的背景色、填充颜色、宽度等。

状态反馈：进度条不仅仅是一个静态的图形，它还可以反映任务的状态，如成功、失败、警告等。Element Plus 的进度条组件支持不同的状态，通过 status 属性来设置。

交互性：在某些情况下，进度条可能需要与用户的操作进行交互，例如暂停、取消任务等。这可以通过添加按钮或其他交互元素来实现。

进度条