首先，新增個商品數(shù)量的加減功能組件找都，就叫cartcontrol.vue吧唇辨。新增個底部購物車組件，叫shopcart.vue吧能耻。在good.vue中引入并注冊組件赏枚。
import cartcontrol from '../cartControl/cartcontrol.vue'
import shopcart from '../shopcart/shopcart.vue'
components:{
cartcontrol,
shopcart
},
- cartcontrol組件在good.vue的DOM中跟每個商品名稱，單價是同個級別的晓猛。綁定個屬性listItem來傳入遍歷的list對象饿幅。
<li class="food-item food-list-hook" v-for="(item,index) in food">
<h3>{{item.name}}</h3>
<div class="food-detail" v-for="list in item.detail">
<div class="title">{{list.name}}</div>
<div class="price">{{list.price + '元'}}</div>
<!-- 加減號 -->
<div class="cartcontrol-wrapper">
<cartcontrol :listItem="list"></cartcontrol>
</div>
</div>
</li>
cartcontrol.vue中，通過props來接收list對象
props: {
listItem: {
type: Object
}
},
因為我在json中沒有設(shè)置數(shù)量這個key戒职，所以需要全局用vue.set進行注冊這個屬性栗恩。在add方法中，如果沒有這個屬性洪燥，那么就注冊磕秤，如果有乳乌，那么就count++
import Vue from 'vue'
export default {
props: {
listItem: {
type: Object
}
},
methods: {
decrease() {
this.listItem.count--
},
add() {
if(!this.listItem.count){
Vue.set(this.listItem, "count", 1)
}else{
this.listItem.count++
}
}
}
}
這里增加了一點小效果。應(yīng)用了<transition>市咆。 并且當(dāng)數(shù)量減到0的時候汉操。通過v-show來控制減號和數(shù)值是否顯示。
<template>
<div class="cartcontrol">
<transition name="roll">
<div class="decrease" @click="decrease()" v-show="listItem.count">-</div>
</transition>
<div class="count" v-show="listItem.count">{{listItem.count}}</div>
<div class="add" @click.stop.prevent="add()">+</div>
</div>
</template>
<style>
.cartcontrol {
}
.count {
display: inline-block;
font-size: 14px
}
.decrease, .add {
display: inline-block;
border:1px solid #000;
border-radius: 50%;
font-size: 14px;
width: 14px;
height: 14px;
text-align: center;
line-height: 12px;
}
.roll-enter-active, .roll-leave-active {
transition: .5s all linear
}
.roll-enter, .roll-leave-to {
transform: translateX(20px) rotate(180deg) ;
}
</style>
寫的比較粗糙蒙兰，估計只有我自己能懂磷瘤。這里要注意一下，在BScroll實例中要配置下click:true癞己。使better-scroll滾動部分支持點擊事件膀斋。否則加減號的點擊事件無效。好吧~下篇寫下底部的購物車功能痹雅。
