image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js"></script>
<style>
*{
margin:0;
padding:0;
}
.big{
width: 500px;
height: 20px;
background-color:#dedede;
margin-top: 20px;
margin-bottom: 20px;
}
.sm{
width:0;
height: 20px;
background-color:red;
transition:all 1s;
}
button{
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div id="box">
<pro @pos="pos" :w="w"></pro>
<btn @reduce="reduce" @add="add" :count="w"></btn>
</div>
</body>
<script>
//组件通信
Vue.component("pro",{
props:["w"],
template:"<div class='big' @click='pos($event)'><div class='sm' :style='{width:w+\"%\"}'></div></div>",
methods:{
pos:function(e){
var p=Math.round((e.clientX / 500) * 100);
this.$emit("pos",p)
}
}
})
Vue.component("btn",{
props:["count"],
template:"<div><button @click='reduce'>-</button><button>{{count}}</button><button @click='add'>+</button></div>",
methods:{
reduce:function(){
this.$emit("reduce")
},
add:function(){
this.$emit("add")
},
}
})
var box=new Vue({
el:"#box",
data:{
w:0
},
methods:{
reduce:function(){
this.w--;
if(this.w<0){
this.w=0;
}
},
add:function(){
this.w++;
if(this.w>100){
this.w=100
}
},
pos:function(a){
this.w=a;
}
}
})
</script>
</html>
