大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章将为大家详细讲解有关vue组件如何实现弹射小球,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
网站建设哪家好,找成都创新互联公司!专注于网页设计、网站建设、微信开发、小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了灵台免费建站欢迎大家使用!
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组件如何实现弹射小球”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。