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>