vue 2.0 购物车小球抛物线的示例代码
本文介绍了vue 2.0 购物车小球抛物线的示例代码,分享给大家,具体如下: 备注:此项目模仿 饿了吗。我用的是最新的Vue,视频上的一些写法已经被废弃了。 布局代码 css代码(使用stylus写法) js代码 {
el.style.webkitTransform = 'translate3d(0,0)';
el.style.transform = 'translate3d(0,0)';
let inner = el.getElementsByClassName('inner-hook')[0];
inner.style.webkitTransform = 'translate3d(0,0)';
inner.style.transform = 'translate3d(0,0)';
});
},afterDrop(el){
let ball = this.dropBalls.shift();
if(ball) {
ball.show = false;
el.style.display = 'none';
}
}
}
getBoundingClientRect()。方法请阅读这篇文章 说明: goods 是一个组件,里面包含menu(div),foods(div),shopcart(购物车组件)。其中foods 包含cartcontrol(即小球组件) 组件之间的通信:说明:菜单和商品第1个问题:小球,需要获取所点击的商品的数量。利用Vue的props,将foods值传递给cartcontrol。但是这样有个问题。即子组件更新,无法同步回父组件。且,在子组件中,对food注册了一个count属性,此属性也无法同步回父组件(goods)。 解决方法: 导入全局的Vue。 利用Vue.set(target,key,value); 对 target注册count; 第2个问题:小球点击,将所点击过的商品数目传递给 shopcart。在goods的 computed:{} 定义一个方法,将该方法以props的方式,传递给shopcart。 因为,shopcart,对传递过去的数据仅数据运算(不会改变)。因此不用同步会父组件。 第3个问题:购物车小球做抛物线运动。对于购物车小球做抛物线运动。首先,落点都在购物车,小球则是随机的。要做抛物线运动,就要获取,所点击的 + 号的x,y位置。其次,抛物线运动,只有在enter--> enter-to这段期间有,在leave--> leave-to 期间是没有的,因此,需要用Vue提供的钩子函数。 获取 + 号x,y 位置:小球(cartcontrol)是子组件。需要把数据传递给 goods(父组件)。可以使用Vuex,或者直接使用事件总线。对于饿了吗demo。直接使用事件总线。 创建一个 空的Vue。在 cartcontrol 中 ,通过 Bus.$emit(key,... arg); 注册一个监听,然后再父组件 通过Bus.$on(key,function(... arg));监听此方法。将所操作的 dom 对象传递过去即可 Vue提供的钩子这里要说明一点,Vue在他的官网,对于只有过度的js,done是必须的,当我加上done的时候,after-enter方法无法被执行。 还有1个问题,Vue官网推荐,只有过度效果,在做过度动画的元素上加上v-bind:class='false'。之前没加,出现了,小球只能在第1次点击的地方做过度效果。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |