封装进度条

最近在项目中碰到一个进度条

接下来就是封装 

 

 

 代码会粘贴在下方

代码封装好了之后就在父组件里调用，然后传递进度就ok了

 

 代码如下：

<template>

    <div class="progressed">

        <div class="box colorbox" v-for="(l, i) in bluebox" :key="i">

        </div>

        <div v-show="remaining" class="otherbox">

            <div class="colorboxed" :style="{width:`${remaining*4}px`}"></div>

            <div class="boxed" :style="{width:`${20 - remaining*4}px`}"></div>

        </div>

        <div class="box" v-for="(l, i) in nobox" :key="20 - i">

        </div>

        <div class="num">{{usage}}% </div>

    </div>

</template>

<script>

export default {

    data() {

        return{

            bluebox: null,

            nobox: null,

            remaining: null

        }

    },

    props: {

        usage: {

            type: Number

        },

    },

    mounted(){

        if (this.usage){

            this.usaged()

        }

    },

    watch: {

        usage: function(){

            this.usaged()

        }

    },

    methods:{

        usaged(){

            console.log(this.usage, 'this.usage');

            this.bluebox = Math.floor(this.usage / 5)

            this.nobox = Math.floor((100 - this.usage) / 5)

            this.remaining = this.usage % 5

            console.log(this.bluebox, 'this.bluebox');

            console.log(this.nobox, 'this.nobox');

            console.log(this.remaining, 'this.remaining');

        }

    }

}

</script>

<style scoped lang="scss">

.progressed{

    display: flex;

    justify-content: space-around;

    position: relative;

    .box{

        width: 20px;

        height: 20px;

        // border: 1px solid #FFF;

        background: #002529;

        margin: 0 4px;

    }

    .colorbox{

        background: #00BACB;

    }

    .otherbox{

        width: 20px;

        display: flex;

        justify-content: space-between;

        margin: 0 4px;

    }

    .colorboxed{

        height: 20px;

        background: #00BACB;

    }

    .boxed{

        height: 20px;

        background: #002529;

    }

    .num{

        position: absolute;

        top: 0;

        left: 0;

        bottom: 0;

        right: 0;

        margin: auto;

        color: #FFF;

        text-align: center;

    }

}

</style>