好资源导航 » 文章资讯 » vue组件初学_弹射小球(实例讲解)

vue组件初学_弹射小球(实例讲解)

2023-09-25 05:59:10 62

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.代码





Document

以上这篇vue组件初学_弹射小球(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

vue组件初学_弹射小球(实例讲解)

热门推荐

随机推荐