Vue shopCart 组件开发详解

// 子组件通过 $emit触发 add事件 ，将参数传递给父组件
this.$emit('add', event.target);
}

1-2. 操作 goods 组件

购物车组件如果提交了addCart事件就调用add函数

 <cart-control :foodsele='food' @add="addFood"></cart-control>

父组件使用 @add=”addFood”监听由子组件vm.$emit触发的事件，通过addFood()接受从子组件传递过来的数据，通知父组件数据改变了。

addFood(target) {
  this._drop(target);
}

1-3. 父组件访问子组件 vue 提供了接口 ref

<shopCart ref=”shopCart” :delivery-price=”sell.deliveryPrice” :min-price=”sell.minPrice” :selefoods-arr=’selectfoods’  ></shopCart>

_drop(target) {
  // 体验优化,异步执行下落动画
  this.$nextTick(() => {
   this.$refs.shopCart.balldrop(target);// 将target传入shopCart子组件中的balldrop方法，所以drop方法能获得用户点击按钮的元素，即能获取点击按钮的位置
  });
}  

区别 访问DOM 变量

1-3. 操作 shopCart 组件

data (){ // 定义一个数组 来 控制小球的状态  定义多个对象，表示页面中做多同时运动的小球
 return{ // 定义 5 个 小球
 balls:[{show:false},{show:false},{show:false},{show:false},{show:false}],
 dropBalls:[] // 接收下落小球
  }
}

methods:{
 balldrop(ele) {
// console.log(el) 取到点击 对象
   for(var i=0;i<this.balls.length;i++){
    let ball=this.balls[i]    if(!ball.show){
     ball.show=true
     ball.ele=ele
     this.dropBalls.push(ball)
     return;
    }
   }
 }
}

动画过程开始，利用vue 提供的钩子函数

beforeEnter (el){ //找到所以设为true的小球
 let count=this.balls.length
 while(count--){
 let ball = this.balls[count];
 if(ball.show){
  let pos=ball.el.getBoundingClientRect() //返回元素相对于视口偏移的位置
  let x=pos.left-32  // 点击的按钮与小球（fixed）之间x方向的差值
  let y=-(window.innerHeight-pos.top-22)
  el.style.display = '';  //设置初始位置前，手动置空，覆盖之前的display：none，使其显示
       el.style.webkitTransform = `translate3d(0,${y}px,0)`; //外层元素做纵向的动画，y是变量
       el.style.transform = `translate3d(0,${y}px,0)`;
       let inner = el.getElementsByClassName('inner_hook')[0];//内层元素做横向动画,inner-hook（用于js选择的样式名加上-hook，表明只是用                                   //于js选择的，没有真实的样式含义）								 
 4/5   首页 上一页 2 3 4 5 下一页 尾页