vue饿了么（四）--cartcontrol组件 & 减号添加滚动动画transition

1.cartcontrol结构

<template>
	<div class="cartcontrol">
		<transition name="move">
			<div class="cart-decrease" v-show="food.count>0" @click.stop.prevent='decCart'>
				<span class="inner icon-remove_circle_outline"></span>
			</div>
		</transition>
		<div class="cart-count" v-show="food.count>0">{{food.count}}</div>
		<div class="cart-add icon-add_circle" @click.stop.prevent="addCart"></div>
	</div>
</template>

2.在goods.vue中引入，注册，使用。

<div class="cartcontrol-wrapper">
    <cartcontrol :food='food' v-on:cart-add="cartAdd"></cartcontrol>
</div>

addCart()函数

import Vue from 'vue';

addCart(event) {
				if(!event._constructed) {//非自定义点击事件的情况下return掉，这样pc端就不会检测到两次点击事件。
					return;
				}
				// console.log(this.food.count);
				if(!this.food.count){
					Vue.set(this.food,'count',1);
				//给对象添加他不存在的属性时，这样的方式是不行的。需要用Vue的Vue.set()
					// this.food.count=1;
				}else{
					this.food.count++;
				}
				this.$emit('cart-add',event.target);
			},

decCart()函数

decCart() {
				if(!event._constructed) {//非自定义点击事件的情况下return掉，这样pc端就不会检测到两次点击事件。
					return;
				}
				if(this.food.count){
					this.food.count--;
				}
			}

商品减少键动画：外层负责平移，内层负责滚动。

.cart-decrease {
			display: inline-block;
			padding: 6px;
			.inner {
				display: inline-block;
				font-size: 24px;
				line-height: 24px;
				color: rgb(0,160,220);
			}
			&.move-enter-active, &.move-leave-active {
				transition: all 0.5s linear;
				opacity: 1;
				transform: translate3d(0,0,0);
                .inner{
                    transition: all 0.5s;
                    opacity: 1;
                    transform: rotate(0deg);
                }
            }
            &.move-enter, &.move-leave-active {
                opacity: 0;
                transform: translate3d(24px, 0, 0);
                .inner{
                	opacity: 0;
                    transform: rotate(180deg);
                }
            }
		}

父组件goods.vue需要接收选中的所有food，定义为selectFoods，传递给shopcart

selectFoods(){
				let foods=[];
				this.goods.forEach((good)=>{
					good.foods.forEach((food)=>{
						if(food.count){
							foods.push(food);
						}
					})
				})
				return foods;
			}

<shopcart ref="shopcart" :selectFoods="selectFoods" :deliveryPrice="seller.deliveryPrice" :minPrice="seller.minPrice"></shopcart>