1. 定义每个弹射的小球组件( ocicle )
2. 组件message自定义属性存放小球初始信息(可修改)
{top: "0px", //小球距离上方坐标
left: "0px", //小球距离左边坐标
speedx: 12, //小球每次水平移动距离
speedy: 6 //小球每次垂直移动距离
}
3. 思路
3.1 定时器设置小球每一帧移动
3.2 初始方向：isxtrue为true则小球为横坐标正方向；
isytrue为true则小球为纵坐标正方向
3.3 每次移动之前获取小球当前坐标(oleft,otop)，当前坐标加上移动距离为下一帧坐标
3.4 边界判断：横轴坐标范围超过最大值则加号变减号
4. vue知识点
4.1 父子组件传递信息使用props
4.2 模板编译之前获取el宽高
beforemount: function (){
this.elwidth=this.$el.clientwidth;
this.elheight=this.$el.clientheight;
}
4.3 子组件获取el宽高 ( this.$root.elwidth,this.$root.elheight )
4.4 模板编译完成后更新子组件信息
mounted: function (){ //根据父组件信息更新小球数据
this.addstyle.top=this.message.top;
this.addstyle.left=this.message.left;
this.speedx=this.message.speedx;
this.speedy=this.message.speedy; //小球初始坐标
this.oleft=parseint(this.addstyle.left);
this.otop=parseint(this.addstyle.top);
this.move();
}
5. 代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<style>
html,
body{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#app{
width: 800px;
height: 500px;
margin: 50px auto;
outline: 1px solid #f69;
position: relative;
} </style>
</head>
<body>
<p id="app">
<ocicle :message="message1"></ocicle>
<ocicle :message="message2"></ocicle>
<ocicle :message="message3"></ocicle>
</p>
<script src="https://unpkg.com/vue"></script>
<script> var tem={
props: ["message"],
template: '<p class="article" :style="addstyle"></p>',
data: function (){
return { //初始化小球样式
addstyle: {
width: "10px",
height: "10px",
backgroundcolor: "#000",
position: "absolute",
margintop: "-5px",
marginleft: "-5px",
borderradius: "50%",
top: "0px",
left: "0px"}, //横坐标方向的速度
speedx: 0, //纵坐标方向的速度
speedy: 0, //isx为真，则在横坐标方向为正
isx: true, //isy为真，则在纵坐标方向为正
isy: true, //小球当前坐标
oleft: 0,
otop: 0
}
},
mounted: function (){ //根据父组件信息更新小球数据
this.addstyle.top=this.message.top;
this.addstyle.left=this.message.left;
this.speedx=this.message.speedx;
this.speedy=this.message.speedy; //小球初始坐标
this.oleft=parseint(this.addstyle.left);
this.otop=parseint(this.addstyle.top);
this.move();
},
methods: {
move: function (){
var self=this;
setinterval(function (){ //更新小球坐标
self.oleft=parseint(self.addstyle.left);
self.otop=parseint(self.addstyle.top);
self.isxtrue();
self.isytrue();
}, 20);
}, //判断横坐标
isxtrue: function (){ //true 横坐标正方向
//false 横坐标负方向
if(this.isx){
this.addstyle.left=this.oleft+this.speedx+"px"; //宽度超过最大边界
if(this.oleft>this.$root.elwidth-5){
this.addstyle.left=this.oleft-this.speedx+"px";
this.isx=false;
}
}else{
this.addstyle.left=this.oleft-this.speedx+"px"; //宽度超过最小边界
if(this.oleft<5){
this.addstyle.left=this.oleft+this.speedx+"px";
this.isx=true;
}
}
}, // 判断纵坐标
isytrue: function (){ //true 纵坐标正方向
//false 纵坐标负方向
if(this.isy){
this.addstyle.top=this.otop+this.speedy+"px"; //高度超过最大边界
if(this.otop>this.$root.elheight-5){
this.addstyle.top=this.otop-this.speedy+"px";
this.isy=false;
}
}else{
this.addstyle.top=this.otop-this.speedy+"px"; //高度超过最小边界
if(this.otop<5){
this.addstyle.top=this.otop+this.speedy+"px";
this.isy=true;
}
}
}
}
} var vm=new vue({
el: "#app",
data: { //获取el节点宽高
elwidth: 0,
elheight: 0, //设置小球初始信息
message1: {
top: "0px",
left: "600px",
speedx: 12,
speedy: 6
},
message2: {
top: "0px",
left: "300px",
speedx: 8,
speedy: 6
},
message3: {
top: "300px",
left: "0px",
speedx: 13,
speedy: 5
}
}, //更新el节点宽高
beforemount: function (){
this.elwidth=this.$el.clientwidth;
this.elheight=this.$el.clientheight;
},
components: {
"ocicle": tem
}
})
</script>
</body>
</html>
以上就是在vue组件中如何写出弹射小球 的详细内容。