进度条组件

bidepanm

已于 2022-09-09 15:45:58 修改

阅读量182

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript 开发语言

于 2022-09-09 15:40:42 首次发布

本文链接：https://blog.csdn.net/bidepanm/article/details/126784164

这篇文章介绍了如何使用 Vue.js 实现一个带有动态颜色和自定义计数的进度条组件，展示了如何通过 props 接收数据并更新组件样式。核心内容包括 CSS 与 JavaScript 的配合，以及图标、名称和数量的显示方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<template>
    <div>
        <p style="justify-content: space-between;">
            <span><i :class="`${data.icon}`" :style="{ color: `${data.color}`}"></i>{{ data.name }}</span>
            <span>{{data.count}}个</span>
        </p>
        <div class="progress-bar">
            <div class="progress-inner" :style="{ width: `${data.value}%` , background: `${data.color}`}">
                <div class="dot top" :style="{ background: `${data.color}`}"></div>
                <div class="dot bottom" :style="{ background: `${data.color}`}"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "index",
    props: {
        data: {
            type: Object,
            default: {
                value: 10,
                color: '#fff',
                icon: 'car',
                name: '哈哈',
                count: 20
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.progress-bar {
    height: .08rem;
    background: #fff;
}
.progress-inner {
	position: relative;
    width: 0;
    height: 100%;
    transition: width .2s;
    .dot {
        content: '';
        position: absolute;
        right: -0.01rem;
        width: .02rem;
        height: .04rem;
        border-radius: 1rem;
        &.top {
            top: 0;
            transform: translateY(-100%);
        }
        &.bottom {
            bottom: 0;
            transform: translateY(100%);
        }
    }
}
</style>