效果图
手动单击按钮逐次实现进度条进行
也可以利用计数器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>