vue2使用组件实现进度条_vue2 进图条-CSDN博客

本文链接：https://blog.csdn.net/promise466/article/details/129055396

效果图
手动单击按钮逐次实现进度条进行
也可以利用计数器setTimeout 单击自动进行
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        #app {
            margin: 50px auto;
            width: 280px;
        }
        .bg{
            align-items: center;
            display: flex;
        }
        .bgcolor {
            width: 200px;
            background-color: #ccc;
            height: 8px;
            border-radius: 10px;
            margin-right: 5px;
        }

        button {
            margin-top: 20px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            background-color: #89eeec;
            border: 0;
            font-weight: 100;
            font-size: 30px;
            color: #ccc;
        }

        .w {
            height: 8px;
            border-radius: 10px;
            transition: .3s;
        }
    </style>
</head>

<body>
    <div id="app">
      <child :w="w" :bg="bg"></child>
      <child :w="w" :bg="bg"></child>
      <child :w="w" :bg="bg"></child>
      <!-- 如果加计时器的话  可以将click事件写在methods里面讲w进行++ -->
        <button @click="w<=0?w=0:w-=10">-</button>
        <button @click="w>=200?w=200:w+=10">+</button>
    </div>
    <!-- 组件template模板 也可以写在下方子组件内部 -->
    <!-- 子组件template 需要绑定id 类似于实例里的el：绑定-->
    <template id="child">
      <div class="bg">
            <div class="bgcolor">
                <div class="w" 
                :style="{'width':w+'px',
                'background-color': w <= 50 ? 'red' :w < 100 ? 'yellow' : w < 150 ? 'skyblue' : w<200?'pink':'blue'}"></div>
            </div>
            <div>{{w}}%</div>
        </div>
    </template>
</body>
<script>
    let child={
        template:"#child",
        props:{
            // 传参类型 w类型数字  default默认值
            // 可以简写 pros：["w","bg"]
            w:{
                typeof:Number,
                default:50
            },
            bg:{
                typeof:String,
                default:()=>{
                    return "red"
                }
            }
        }
    }
    new Vue({
        el: '#app',
        data() {
            return {
                // 设置宽的变量
                w: 50,
                bg: "red"
            }
        },
        components:{
            child
        },
    })
    // 思路
    // 01 html搭建: 搭建一个父子盒子 父容器作为背景 子元素是进行的进度条
    // 02 js部分 将子元素的宽和颜色 设为动态变化的变量 就是本文的w和bg
    // 03 将整个html写在组件child里  且将变量w和bg通过pros父传子想通
</script>

</html>