Vue自定义进度条组件

最新推荐文章于 2024-06-09 10:01:24 发布

新城大海

最新推荐文章于 2024-06-09 10:01:24 发布

阅读量863

点赞数

文章标签： Vue Progress组件动态宽度颜色比例百分比展示

本文链接：https://blog.csdn.net/weixin_45664217/article/details/119896918

版权

在这里插入图片描述

进度条组件
使用Vue自定义进度条 Progress 组件。基本实现思路：用两个嵌套的div，外层div给蓝色背景，内层div给黄色背景；动态地改变黄色div的宽度，动态地计算出色彩（宽度）占比。

1、核心代码如下

<body>
    <div id="app">
        <my-progreess :rate="rate"></my-progreess>
    </div>
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        Vue.component('my-progreess', {
            props: {
                rate: {
                    type: Number,
                    required: false,
                    default: 0
                }
            },
            template: `<div>
                <div class="progress">
                    <div class="rate" :style='{"width":rate+"px"}'></div>
                </div>
                <div class='nums'>
                    <div><span v-text='Math.round(rate/2)'></span>%</div>
                    <div><span v-text='100-Math.round(rate/2)'></span>%</div>
                </div>            
            </div>`
        })
        const vm = new Vue({
            el: '#app',
            data: {
                rate: 0
            },
            mounted: function() {
                this.timer = setInterval(()=>{
                    // 动态改变黄色div的宽度
                    this.rate++
                    // 当然进度满格时，关闭定时器
                    if (this.rate >= 200) {
                        clearInterval(this.timer)
                    }
                }, 150)
            }
        })
    </script>
</body>

css样式如下：

 <style>
         #app {
            padding: 50px;
        }
        .progress {
            width: 200px;
            height: 30px;
            <style>
         #app {
            padding: 50px;
        }
        .progress {
            width: 200px;
            height: 30px;
            background-color: rgba(87, 80, 30, 1);
            border-radius: 15px;
            overflow: hidden;
            position: relative;
        }
        .rate {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            background-color: rgb(240, 145, 37);
            width: 0;  
        }
        .nums {
            font-size: 16px;
            width: 200px;
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            box-sizing: border-box;
            padding: 0 5px;
        }
        .nums div:first-child {
            float: left;
        }
        .nums div:last-child {
            float: right;
        }
    </style>

本篇结束

新城大海

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue自定义进度条组件

进度条组件使用Vue自定义进度条 Progress 组件。基本实现思路：用两个嵌套的div，外层div给蓝色背景，内层div给黄色背景；动态地改变黄色div的宽度，动态地计算出色彩（宽度）占比。1、核心代码如下<body> <div id="app"> <my-progreess :rate="rate"></my-progreess> </div> <script src="https:..
复制链接

扫一扫