Vue shopCart 组件开发详解(3)

日期：2020-05-11 栏目：程序人生浏览：次

 .cart-decrease
  display inline-block
  padding 6px
  transition: all .4s linear  /*过渡效果的 CSS 属性的名称、过渡效果需要多少时间、速度效果的速度曲线*/  
  .inner
   line-height 24px
   font-size 24px
   color rgb(0,160,220)
   transition all 0.4s linear
  &.move-enter-active, &.move-leave-active
   transform translate3d(0,0,0) /* 这样可以开启硬件加速，动画更流畅，3D旋转，X轴位移24px */
   .inner   
    display inline-block  /* 设置成inline-block才有高度，才能有动画 */
    transform rotate(0)
  &.move-enter, &.move-leave-active
   opacity: 0
   transform translate3d(24px,0,0)
   .inner
    transform rotate(180deg)

三、抛物线小球动画

通过两个层来控制小球，外层控制一个方向的变化，内层控制另外一个方向的变化（写两层才会有抛物线的效果），采用fixed布局（是相对于视口的动画）

事件发射和接收

组件之间传值-1

组件之间传值-2

扩展

Vue1.0组件间传递

使用$on()监听事件；
使用$emit()在它上面触发事件；
使用$dispatch()派发事件，事件沿着父链冒泡；
使用$broadcast()广播事件，事件向下传导给所有的后代

(1) Vue2.0 组件之间传递数据

1-1. 当点击添加数量时在 cartControl 组件里的 addCount 方法里通过 $emit 属性派发一个事件 , 传入点击的对象

addCart(event){ // 点击count 加，
//  console.log(event.target);
 if (!event._constructed) { // 去掉自带click事件的点击
    return;
   }
 if(!this.foodsele.count){
 Vue.set(this.foodsele, 'count', 1)
 }else{
 this.foodsele.count++
 }
// 当点击 添加数量时 通过 $emit 属性 提交一个名为 add 给父组件
// 子组件通过 $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方法能获得用户点击按钮的元素，即能获取点击按钮的位置
  });
}

转载注明出处：http://www.heiqu.com/216.html

Vue shopCart 组件开发详解(3)

相关推荐