首页 > 其他分享 >Elment Plus数据展示 | Progress进度条(超详细!)

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

时间：2024-09-15 15:49:11浏览次数：14  
标签：const 进度条 Elment value Plus progress percentage 100

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

一、直线进度条

        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>

运行效果：

          

标签：const,进度条,Elment,value,Plus,progress,percentage,100
From： https://blog.csdn.net/m0_74139820/article/details/142280491

相关文章

  • C++ Primer Plus 第六版中文版（上）
    参考资料：《C++PrimerPlus第六版中文版》笔记作者：Mr.Crocodile欢迎转载文章目录开始学习C++头文件命名规定名称空间`cout`、`cin`函数处理数据简单变量变量命名规则整型运算符`sizeof`和头文件climitsclimits中的符号常量变量初始化整型字面量整型字面量后缀char......
  • mybatis plus多表查询的扩展
    mybatisplus提供了简单的CURD操作，但是有时我们的业务需要要求进行多表查询，这个时候，我们就需要加入多表查询的扩展了。 mybatis-plus-join，基于mybatis-plus的所有优点，然后还支持连表查询，还支持一对多，一对一的查询。mybatis-plus-join是mybatisplus的一个多表插件，上手简单，几分钟就......
  • cpp primer plus 第七章
    7.1函数基本知识7.1.1定义函数函数分为两类：有返回值与无返回值的函数。对于有返回值的函数，必须使用返回语句，将值返回给调用函数。若函数包含多条返回语句，则函数在执行第一条返回语句后结束。7.1.2函数原型声明函数如果在main函数后方，则在前面声明函数（复制函数定义中的......
  • SpringBoot:Web开发(基于SpringBoot使用MyBatis-Plus+JSP开发)
    目录前期准备构建项目（IDEA2023.1.2，JDK21，SpringBoot3.3.3）添加启动器Model准备这里我们利用MybatisX插件生成我们所需要的实体类、数据访问层以及服务层注意选择MyBatis-Plus3以及Lombok然后再在service接口中定义我们所需要的方法以及实现类(利用MyBatis-Plus省去我们......
  • 尤雨溪推荐的拖拽插件，支持Vue2/Vue3 VueDraggablePlus
    大家好，我是「前端实验室」爱分享的了不起~今天在网上看到尤雨溪推荐的这款拖拽组件，试了一下非常不错，这里推荐给大家。说到拖拽工具库，非大名鼎鼎的的Sortablejs莫属。它是前端领域比较知名的，且功能强大的工具。但我们直接使用Sortablejs的情况很少，一般都是使用基于它的......
  • 标准的vue3 elementplus格式,不用export default
    <template><div><!--查询表单--><el-form:inline="true":model="filters"class="demo-form-inline"><el-form-itemlabel="产品料号"><el-inputv-model="filters.......
  • Mybatis与Mybatis-plus的比较
    MyBatis和MyBatis-Plus都是流行的JavaORM框架，它们在处理数据库操作时各有优势和特点。以下是对两者的比较：MyBatisMyBatis是一个成熟的ORM框架，它提供了映射SQL语句到Java对象的能力。以下是MyBatis的一些优缺点：优点：灵活性高：MyBatis允许开发者编写原生SQL，提......
  • MyBatis-Plus动态表名
    MyBatis-Plus动态表名一、早期方案1.1MyBatis-Plus版本1、添加MyBatis-Plus依赖<dependency>   <groupId>com.baomidou</groupId>   <artifactId>mybatis-plus-boot-starter</artifactId>   <version>3.5.1</version></dependency>......
  • 【Stable Diffusion】最新换脸模型：IP-Adapter Face ID Plus V2 WebUI 效果超赞！（附模型
    ControlNet是StableDiffusionWebUI中功能最强大的插件。基于ControlNet的各种控制类型让StableDiffusion成为AI绘图工具中最可控的一种。IPAdapter就是其中的一种非常有用的控制类型。它不仅能够实现像Midjourney一样的“垫图”功能，还能用来给肖像人物换脸......
  • 进度条效果
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>ProgressBar</title>......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99