el-progress入门学习

最新推荐文章于 2024-06-25 17:48:49 发布

自律最差的编程狗

最新推荐文章于 2024-06-25 17:48:49 发布

阅读量2.4k

点赞数

分类专栏： element-ui 文章标签：学习 vue.js javascript

本文链接：https://blog.csdn.net/qq_40765784/article/details/125315020

版权

element-ui 专栏收录该内容

43 篇文章 21 订阅

订阅专栏

el-progress入门学习

知识点

percentage为百分比，范围是0~100
status的值可以为success,warning,exception
format自带percentage参数，可以格式化文本显示效果
text-inside设置为true，文本显示在内部
stroke-width设置的直径宽度
color设置颜色，可以为字符串，数组或是函数，数组元素的两个属性分别为color,percentage，想象成switch语句percentage相当于小于某百分比时，显示指定颜色
type可以设置成line,circle,dashboard，分别为线性，圆形，方向盘型

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
</head>

<body>
    <div id="app">
        <el-progress :percentage='50'></el-progress>
        <el-progress :percentage='100'></el-progress>
        <el-progress :percentage='100' :format='formatFull'></el-progress>
        <el-progress :percentage='100' status="success"></el-progress>
        <el-progress :percentage='100' status="warning"></el-progress>
        <el-progress :percentage='100' status='exception'></el-progress>
        <el-progress :percentage='50' :text-inside='true' :stroke-width='20' status='success'></el-progress>
        <el-progress :percentage='60' :text-inside='true' :stroke-width='22' status='warning'></el-progress>
        <el-progress :percentage='70' :text-inside='true' :stroke-width='24' status='exception'></el-progress>
        <el-progress :percentage='80' :text-inside='true' :stroke-width='26'></el-progress>
        <el-progress :percentage='percentage' :color='percentageColor'></el-progress>
        <el-progress :percentage='percentage' :color='percentageColors'></el-progress>
        <el-progress :percentage='percentage' :color='percentageSetColors'></el-progress>
        <el-button-group>
            <el-button icon='el-icon-minus' @click='decrease'></el-button>
            <el-button icon='el-icon-plus' @click='increase'></el-button>
        </el-button-group><br>
        <el-progress type='circle' :percentage='0'></el-progress>
        <el-progress type='circle' :percentage='25'></el-progress>
        <el-progress type='circle' :percentage='100' status='success'></el-progress>
        <el-progress type='circle' :percentage='70' status='warning'></el-progress>
        <el-progress type='circle' :percentage='50' status='exception'></el-progress>
        <el-progress type='dashboard' :color='percentageColors' :percentage='percentage'></el-progress>
    </div>
</body>

</html>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                percentage: 30,
                percentageColor: 'blue',
                percentageColors: [
                    { color: 'red', percentage: 20 },
                    { color: 'orange', percentage: 40 },
                    { color: 'yellow', percentage: 60 },
                    { color: 'green', percentage: 80 },
                    { color: 'blue', percentage: 100 }
                ],
            }
        },
        methods: {
            formatFull(percentage) {
                return percentage === 100 ? '满' : `${percentage}%`
            },
            percentageSetColors(percentage) {
                if (percentage < 30) {
                    return "red";
                } else if (percentage < 70) {
                    return "orange";
                } else {
                    return "yellow";
                }
            },
            decrease() {
                let percentage = this.percentage;
                return this.percentage = percentage < 10 ? 0 : percentage - 10;
            },
            increase() {
                let percentage = this.percentage;
                return this.percentage = percentage > 90 ? 100 : percentage + 10;
            }
        }
    })
</script>