Element Plus数据展示 | Progress进度条(超详细!)

已于 2024-09-15 16:01:01 修改
阅读量675 收藏 8
点赞数 16
文章标签： vue.js javascript 前端
于 2024-09-15 15:57:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74139820/article/details/142280491
版权

        用于展示操作进度，告知用户当前状态和预期。

一、直线进度条

        Progress 组件设置 percentage 属性即可，表示进度条对应的百分比。 该属性必填，并且必须在 0-100 的范围内。 你可以通过设置 format 来自定义文字显示的格式。     

运行代码：

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

<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>

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

 运行效果：

二、进度条内显示百分比标识

        百分比不占用额外空间，适用于文件上传等场景。

        Progress 组件可通过 stroke-width 属性更改进度条的高度，并可通过 text-inside 属性来改变进度条内部的文字。

运行代码：

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

<template>
  <div class="demo-progress">
    <el-progress :text-inside="true" :stroke-width="26" :percentage="70" />
    <el-progress
      :text-inside="true"
      :stroke-width="24"
      :percentage="100"
      status="success"
    />
    <el-progress
      :text-inside="true"
      :stroke-width="22"
      :percentage="80"
      status="warning"
    />
    <el-progress
      :text-inside="true"
      :stroke-width="20"
      :percentage="50"
      status="exception"
    />
  </div>
</template>

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

运行效果：

三、自定义进度条的颜色

        可以通过 color 属性来设置进度条的颜色。 该属性可以接受十六进制颜色值，函数和数组。

运行代码：
 

<script lang="ts" setup>
import { ref } from 'vue'
import { Minus, Plus } from '@element-plus/icons-vue'

const percentage = ref(20)
const customColor = ref('#409eff')

const customColors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 },
]

const customColorMethod = (percentage: number) => {
  if (percentage < 30) {
    return '#909399'
  }
  if (percentage < 70) {
    return '#e6a23c'
  }
  return '#67c23a'
}
const increase = () => {
  percentage.value += 10
  if (percentage.value > 100) {
    percentage.value = 100
  }
}
const decrease = () => {
  percentage.value -= 10
  if (percentage.value < 0) {
    percentage.value = 0
  }
}
</script>

<template>
  <div class="demo-progress">
    <el-progress :percentage="percentage" :color="customColor" />

    <el-progress :percentage="percentage" :color="customColorMethod" />

    <el-progress :percentage="percentage" :color="customColors" />
    <el-progress :percentage="percentage" :color="customColors" />
    <div>
      <el-button-group>
        <el-button :icon="Minus" @click="decrease" />
        <el-button :icon="Plus" @click="increase" />
      </el-button-group>
    </div>
  </div>
</template>

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

运行效果：

四、环形进度条

        Progress 组件可通过 type 属性来指定使用环形进度条，在环形进度条中，还可以通过 width 属性来设置其大小。

运行代码：
 

<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>

运行效果：

五、仪表盘形进度条

        您也可以指定 type 属性到 dashboard 使用控制面板进度栏。

运行代码：

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { Minus, Plus } from '@element-plus/icons-vue'

const percentage = ref(10)
const percentage2 = ref(0)

const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 },
]

const increase = () => {
  percentage.value += 10
  if (percentage.value > 100) {
    percentage.value = 100
  }
}
const decrease = () => {
  percentage.value -= 10
  if (percentage.value < 0) {
    percentage.value = 0
  }
}
onMounted(() => {
  setInterval(() => {
    percentage2.value = (percentage2.value % 100) + 10
  }, 500)
})
</script>

<template>

  <div class="demo-progress">
    <el-progress type="dashboard" :percentage="percentage" :color="colors" />
    <el-progress type="dashboard" :percentage="percentage2" :color="colors" />
    <div>
      <el-button-group>
        <el-button :icon="Minus" @click="decrease" />
        <el-button :icon="Plus" @click="increase" />
        </el-button-group>
    </div>
  </div>
</template>

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

运行效果：

六、自定义内容

        通过默认插槽添加自定义内容。

运行代码：

<script lang="ts" setup>
import { Check } from '@element-plus/icons-vue'
</script>
<template>
  <div class="demo-progress">
    <el-progress :percentage="50">
      <el-button text>Content</el-button>
    </el-progress>
    <el-progress
      :text-inside="true"
      :stroke-width="20"
      :percentage="50"
      status="exception"
    >
      <span>Content</span>
    </el-progress>
    <el-progress type="circle" :percentage="100" status="success">
      <el-button type="success" :icon="Check" circle />
    </el-progress>
    <el-progress type="dashboard" :percentage="80">
      <template #default="{ percentage }">
        <span class="percentage-value">{{ percentage }}%</span>
        <span class="percentage-label">Progressing</span>
      </template>
    </el-progress>
  </div>
</template>
<style scoped>
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
}
.demo-progress .el-progress--circle {
  margin-right: 15px;
}
</style>

运行效果：

七、动画进度条

        使用 indeterminate 属性来设置不确定的进度， duration 来控制动画持续时间。

运行代码：

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

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

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

运行效果：

八、条纹进度条

        通过设置 striped 属性获取条纹进度条。 也可以使用 striped-flow 属性来使条纹流动起来。 使用duration 属性来控制条纹流动的速度。

运行代码：

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { Minus, Plus } from '@element-plus/icons-vue'

const percentage = ref<number>(70)
const duration = computed(() => Math.floor(percentage.value / 10))

const increase = () => {
  percentage.value += 10
  if (percentage.value > 100) {
    percentage.value = 100
  }
}
const decrease = () => {
  percentage.value -= 10
  if (percentage.value < 0) {
    percentage.value = 0
  }
}
</script>


<template>
  <div class="demo-progress">
    <el-progress :percentage="50" :stroke-width="15" striped />
    <el-progress
      :percentage="30"
      :stroke-width="15"
      status="warning"
      striped
      striped-flow
    />
    <el-progress
      :percentage="100"
      :stroke-width="15"
      status="success"
      striped
      striped-flow
      :duration="10"
    />
    <el-progress
      :percentage="percentage"
      :stroke-width="15"
      status="exception"
      striped
      striped-flow
      :duration="duration"
    />
    <el-button-group>
      <el-button :icon="Minus" @click="decrease" />
      <el-button :icon="Plus" @click="increase" />
    </el-button-group>
  </div>
</template>


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

运行效果：

          

DngYT
关注
组件-Element---Progress （进度条）
GU_AO_SHI_TAI_DU的博客
07-03 1万+
组件-Element—Progress （进度条） 组件—进度条 线形进度条 <el-progress :percentage="50"></el-progress> <el-progress :percentage="100" :format="format"></el-progress> <el-progress :percentag...
【element】progress-修改进度条形状、高度、颜色、动态传值
Weiqian_的博客
09-16 1万+
【element】progress-修改进度条形状、高度、颜色、动态传值
数字显示进度条NumberProgress
04-11
数字气泡显示当前进度，方便灵活自定义
Element Plus 实例详解（六）___Progress 进度条
逆境清醒的博客
03-26 7244
Element Plus 实例详解（六）___Progress 进度条，直线进度条，进度条内显示百分比标识，环形进度条，仪表盘形进度条，自定义内容，自定义进度条的颜色，动画进度条
如何使用elementui实现一个根据页面进度实时增长/前进的进度条
最新发布
世轩的博客
09-10 1032
{在上述代码中，我们使用了 Element UI 的 el-progress 组件来展示进度条。通过监听页面滚动事件来实时更新进度条的百分比。同时，添加了一个点击事件处理函数 handleProgressClick，当用户点击进度条时，计算点击位置对应的百分比，并可以根据这个百分比实现页面跳转的逻辑（这里只是打印了跳转信息，实际中需要根据具体需求实现页面跳转）。请注意，这只是一个简单的示例，实际应用中需要根据具体的页面结构和需求进行调整和完善。
list 根据某个数字所在位置_如何设计出色的数字标牌
weixin_39665992的博客
11-11 77
零售门店或者大型商超百货做数字标牌设计时并不是那么的容易。首先你得选择数字标牌采用的屏幕类型，屏幕放在什么位置以及屏幕上承载什么样的内容，都需要作出决定。因此，当我们想要创建数字标牌时，就要根据以上的提示信息来确定符合品牌或者门店的数字标牌。选择最佳位置不要等到买好了数字屏幕后再去决定摆放他们的位置。不要试图让空间去适合屏幕，相反，我们应该找出想要放置数字标牌的位置，然后为该位置购买最佳屏幕。查看...
自定义ProgressBar带进度数字效果
05-03
自定义ProgressBar带进度数字效果
vue+elementUI el-progress实现可拖拽进度条
li222248的博客
05-19 3612
vue+elementUI el-progress实现可拖拽进度条
渐变色进度条(Progress)效果
03-16
下面将详细介绍如何在Android中实现渐变色进度条效果。 首先，我们需要了解Android中的`ProgressBar`组件。`ProgressBar`是Android系统提供的用于显示进度的视图，它可以是水平的、垂直的或者圆形的。在这个场景下...
element-plus 进度条progress 颜色渐变
09-07
要实现element-plus进度条progress的颜色渐变效果，可以按照以下步骤进行： 1. 首先，在进度条的外层元素上设置一个class，比如`.my_progress`。 2. 使用环形渐变效果，可以修改白底色。在样式表中，添加以下代码...
又一简单颜色渐变进度条
07-09
在众多的UI元素中，进度条是一个常见的组成部分，用于展示任务的完成状态。本文将深入探讨一种名为"又一简单颜色渐变进度条"的设计实现，该设计旨在为用户提供更美观、动态的视觉反馈。 首先，"又一简单颜色渐变...
基于Element的进度条Loading
Achong999的博客
01-31 1388
前端在中后台项目开发中经常要使用到loading遮罩层在数据交互时展示，目前我使用element组件库的loading，发现不能自定义，loading的样式比较少，官方只提供修改loading的图标和文字。但是我的需求是希望展示的是进度条一样的效果，那就不用loading组件，使用element的Progress进度条组件，自己写一个。在需要遮罩的元素内放入即可，接收loading参数控制是否展示，展示时会覆盖父级元素。基于Element的进度条loading组件。组件的api可以自行添加。
vue3+elementPlus+原生js：根据浏览器宽度的element进度条跟着缩放
意初的博客
10-21 1240
项目背景：浏览器缩放时，el进度条还是固定的宽度无法达到自适应状态，所以要使用原生js获取dom来进行判断即可。js层，直接编写响应函数，先用querySelectorAll获取所有进度条的dom之后，在进行循环遍历在for循环里进行样式的改写.这里是浏览器的宽度，用来判断进度条的大小样式。获取所有进度条的dom，进度条的响应样式，最后在vue视图挂载，window.onresize指的是实时监听变化
Vue3+ElementPlue文件批量上传(自定义上传列表)
qq_42436422的博客
08-17 5998
基于vue3、ts、elementplus的拖拽批量上传，且上传列表为表格自定义，可单选多选
[Python] 实现文本进度条
热门推荐
一以贯之的努力 不得懈怠的人生
04-27 2万+
怎么利用格式化输出和时间延迟来实现控制台风格的文本进度条呢
element plus 的 el-progress 进度条颜色渐变
qq_59626859的博客
11-06 3705
element 的 el-progress 进度条颜色渐变 ,修改原本的颜色
vue中使用Element-UI----如何修改环形进度条尺寸
weixin_44111864的博客
05-01 1万+
官网文档中默认尺寸是width:126px，height:126px; 直接给放进度条的盒子设尺寸是不会起作用的，需要如下设置
C#_ProgressBar 显示进度数字
weixin_30747253的博客
04-16 1102
使用ProgressBar，并且通过数字的形式显示进度，一开始以为很简单啊（其实是真的很简单），于是乎一开始的代码是这样的： public partial class Form1 : Form { public Form1() { InitializeComponent(); } protected override void...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值