自定义进度条demo

最新推荐文章于 2024-02-05 13:57:49 发布

The Dark Kinght

最新推荐文章于 2024-02-05 13:57:49 发布

阅读量257

点赞数

分类专栏：前端文章标签： css vue 进度条

本文链接：https://blog.csdn.net/u013455430/article/details/95601989

版权

前端专栏收录该内容

38 篇文章 0 订阅

订阅专栏

进度条主要是通过css实现的，通过绑定style，来设置宽度进度条的宽度（这里可以用百分比）

代码如下：

<template>
    <div class="right">
        <div class="top">
            <div class="processbar">
                <p>进度条demo</p>
                <div class="rate">
                    <div :style="ratestyle"></div>
                </div>
            </div>
        </div>
    </div>
    
</template>
<script>
export default {
    name:'emit-demo',
    data() {
        return {
            
        }
    },
    computed:{
        //通过style的绑定，这里可以传入像素，也可是百分比
        ratestyle(){
            return{
              width: '50px'
            }
        }
    }
    
}
</script>
<style lang="scss">
    .right{
        width: calc(100%-350px) ;
        height: 100%;
        display: inline;
    }
    .top{
        padding-left:50px ;
        display: flex;
        top: 50px;
        right: 50px;
    }
    .processbar{
        display: flex;
        //方向
        flex-direction: column;
        .rate{
            //底色条的样式
            height: 12px;
            background-color: rgba($color: #000000, $alpha: 0.08);
            border-radius: 1px;
            position: relative;
            //这里的主要要注意display的样式
            &>div{
                display: inline-block;
                position: absolute;
                height: 12px;
                width: 100%;
                border-radius: 1px;
                background-color:seagreen;
            }

        }
    }
</style>

效果图：