點選food展開詳情頁food.vue的實現

1）新建good資料夾和good.vue，設定樣式，並接受一個被選中的food

 props: { //接收傳入的food
        food: {
            type: Object
        }
    }

food是由goods元件傳出的，現在goods元件中引入food，並從data中將被選中的food傳入food.vue中

<food :food="selectedFood"></food>

其中，selectedFood初始化為空物件，一開始沒有food被選擇

data{
	 selectedFood: {} //一開始是空物件，點選food的時候再存入，在li(food)中新增點選事件
 }
 

之後在goos.vue的food列表中新增點選事件，點選food之後，更新selectedFood{}

<li @click="selectFood(food,$event)" v-for="food in item.foods" :key="food.id" class="food-item"  border-1px>

 <li @click="selectFood(food,$event)" v-for="food in item.foods" :key="food.id" class="food-item"  border-1px>
 selectFood(food, event){ //@click函式
    if (!event._constructed) { //瀏覽器直接return掉,去掉自帶click事件的點選
        return;
     }
      this.selectedFood = food; //更新data中的selectedFood
  }
 

最後，如1），在food.vue中接收food資料

3）在goods.vue中，點選一種food的時候會彈出food.vue中的詳情介面，新增this.$refs.food.show()；

  <li v-for="food in item.foods" :key="food.id" class="food-item" border-1px @click="selectFood(food,$event)">

selectFood(food, event) { //@click函式
    if (!event._constructed) { //瀏覽器直接return掉,去掉自帶click事件的點選
        return;
     }
      this.selectedFood = food;
      //呼叫子元件的show()方法展開food元件
      this.$refs.food.show();
  }
 },
 

在food.vue中新增show()方法

    show() { //可以被父元件呼叫到，方法前加下劃線一般是私有方法
            this.showFlag = true;
            //初始化部分，ratingselect元件是被被不同的商品使用的，所以我們希望在點開不同的商品時，能有一樣的初始化狀態
            this.selectType = ALL;
            this.onlyContent = false;
            //展示介面時用到BScroll
            this.$nextTick(() => {
                if (!this.scroll) {
                    this.scroll = new BScroll(this.$refs.food, {
                        click: true // 可以被點選
                    });
                } else {
                   this.scroll.refresh();
                }
            });
        },

    <div class="image-header">
       <img :src="food.image" alt="">
       <div class="back" @click="hide">
           <i class="icon-arrow_lift"></i>
        </div>

     </div>

        hide() {
            this.showFlag = false;
        },

<div v-show="showFlag" class="food" ref="food"> 實際上改變的是show方法中showFlage的值

5）新增商品名稱，月售價格等部分+CSS佈局

6) good.vue是定長的，我們希望新增BScroll實現滾動佈局，將BScroll繫結在最外層，為其新增ref，讓其DOM可以被訪問到，BScroll應該在介面呈現時用到，將其新增到show()方法（介面呈現）中

good.vue中
	show() { //可以被父元件呼叫到，方法前加下劃線一般是私有方法
            this.showFlag = true;
            //ratingselect元件是被被不同的商品使用的，所以我們希望在點開不同的商品時，能有一樣的初始化狀態
            this.selectType = ALL;
            this.onlyContent = true;
            //展示介面時用到BScroll
            this.$nextTick(() => {
                if (!this.scroll) {
                    this.scroll = new BScroll(this.$refs.food, {
                        click: true // 可以被點選
                    });
                } else {
                   this.scroll.refresh();
                }
            });
        },
food.vue中
 selectFood(food, event) { //@click函式
    if (!event._constructed) { //瀏覽器直接return掉,去掉自帶click事件的點選
        return;
     }
      this.selectedFood = food;
      //呼叫子元件的show()方法展開food元件
      this.$refs.food.show();
  }

7）新增加入購物車按鈕，點選加入購物車之後，出現cartcontrol加減號按鈕

 <div class="cartcontrol-wrapper"> <!-- 加減號元件cartcontrol -->
        <cartcontrol :food="food"></cartcontrol>
  </div>

                <transition name="fade"> 
                    <div @click.stop.prevent="addFirst" class="buy" v-show="food.count === 0 || !food.count">
                        加入購物車    
                    </div> <!-- 這兩種情況下加入購物車都會顯示,否則就會隱藏-->
                </transition>

2.點選了加入購物車按鈕之後，出發addFirst()事件,即第一次新增事件，這是加入購物車字樣轉變為加減號元件

        addFirst(event) { // 預設的引數是event,點選按鈕的時候新增的是第一個商品
            if (!event._constructed) { //瀏覽器直接return掉,去掉自帶click事件的點選
                return;
            }
            //第一次的時候el消失，找不到小球發出的其實位置，所以第一次小球動畫消失
            //解決辦法就是將購物車的消失做成一個動畫，而不是立馬display:none
            //新增的時候新增小球動畫，派發事件，之後goods.vue就可以監聽到cart-add，並傳遞給shopcart.vue
            this.$emit('cart-add', event.target);
            Vue.set(this.food, 'count', 1); //初始化this.food.count = 1;
        }

3.父元件goods.vue中進行監聽

 cartAdd(target) {
     //拿到traget(DOM物件)之後，將其傳入shopcart元件中drop(target){}方法，
     //此處用this.$refs呼叫子元件,訪問DOM時用的是ref="menuWrapper"
    this.$nextTick(() => { //回撥函式非同步執行，兩個動畫效果就不會卡頓了
      this.$refs.shopcart.drop(target);
    });
   },

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

CSS:
.cartcontrol-wrapper
        position absolute
        right 12px
        bottom 12px
    .buy
        position absolute
        right 18px
        bottom 18px
        z-index 10 // 要蓋住加減號元件
        height 24px
        line-height 24px
        padding 0 12px
        box-sizing border-box
        font-size 10px
        border-radius 10px
        color #ffffff
        background rgb(0,160,220)
        &.fade-enter-active, &.fade-leave-active
            transition all 0.2s 
            opacity 1
        &.fade-enter, &fade-leave-active
            opacity 0

8）在goods元件點選加減號cartcontrol的時候，也會引起good詳情頁的出現，此時在cartcontrol中阻止加減號的冒泡即可，同時對加入購物車的click也設定阻止冒泡

<div class="cart-decrease" v-show="food.count>0" @click.stop.prevent="decreaseCart">
<div class="cart-add icon-add_circle" @click.stop.prevent="addCart"></div>
<div @click.stop.prevent="addFirst" class="buy" v-show="food.count === 0 || !food.count">

<template>
  <div class="split"></div>
</template>

<script type="text/ecmascript-6">
  export default {};
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .split
        width 100%
        height 16px
        border-top: 1px solid rgba(1, 17, 27, 0.1);
        border-bottom: 1px solid rgba(1, 17, 27, 0.1);
        background: #f3f5f7
</style>