Progress 进度条

最新推荐文章于 2025-11-05 11:53:42 发布

原创最新推荐文章于 2025-11-05 11:53:42 发布 · 379 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html #vue

Vue.js 同时被 2 个专栏收录

15 篇文章

订阅专栏

element-ui

3 篇文章

订阅专栏

本文详细描述了如何在Vue项目中使用vuedom结构创建带有动态颜色和百分比的el-progress组件，并配以相应的CSS样式，展示了Web开发中的数据绑定和样式控制。

vue dom结构如下：

<div class="content">
	<div class="content_" v-for="(item, i) in dataList" :key="i">
		<el-progress stroke-linecap="square" :show-text="false"
					 :style="{left: 'calc(50% - '+ (item.width/2 + 30)             +'px)',top:'calc(50% - '+ (item.width/2) +'px)'}"
					 :stroke-width="12" :color="item.color" :width="item.width" type="dashboard"
					 :percentage="item.rate" define-back-color="#2B364F"></el-progress>
		<div class="progress-info" :class="'progress-info_' + i">
			<div class="progress-info-line"></div>
			<div class="progress-info-round" :style="{background: item.color}"></div>
			<div class="progress-info-label">{{ item.name }}：</div>
			<div class="progress-info-value">{{ item.count }}</div>
		</div>
	</div>
	<p>{{workCount}}</p>
</div>
dataList = [
	{
		width: 200,
		color: '#245387',
		name: 'web',
		count: 0,
		rate: 0,
	},
	{
		width: 150,
		color: '#69FAFE',
		name: 'Java',
		count: 0,
		rate: 0,
	},
	{
		width: 100,
		color: '#F15358',
		name: 'C++',
		count: 0,
		rate: 0,
	}
];

css scss代码如下：


    .content {
        color: #fff;
        width: calc(100% - 40px);
        height: calc(100% - 74px);
        padding: 0 20px 10px;
        position: relative;
        flex: 1;
        &_ {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;

        }

        /deep/ .el-progress {
            transform: rotate3d(1, 0.4, 0, 180deg);
            position: absolute;
            left: 20px;
        }

        .progress-info {
            display: flex;
            align-items: center;
            position: absolute;
            font-size: 12px;
            height: 20px;
            line-height: 20px;
            width: 50%;
            left: calc(50% - 16px);

            &-line {
                flex: 4;
                height: 1px;
                border-bottom: 1px dashed #ffffff;
            }

            &-label {
                flex: 5;
            }

            &-value {
                flex: 1;
            }

            &-round {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                margin: 0 5px;
            }

            &_0 {
                top: calc(50% - 105px);
            }

            &_1 {
                top: calc(50% - 80px);
            }

            &_2 {
                top: calc(50% - 55px);
            }

        }
        p {
            width: 100px;
            height: 50px;
            font-size: 16px;
            position: absolute;
            left: calc(50% - 85px);
            top: calc(50% - 25px);
            color: #fff;
            line-height: 50px;
            font-weight: bold;
            text-align: center;
        }
    }

效果图如下：