cartcontrol.vue購物車操做按鈕

html代碼

知識點:

• 使用了vue2的動畫實現方式-transition,這裏主要在css上設計來配合vue2

• cartcontrol這個模塊主要經過三個小模塊實現,刪除按鈕,顯示數量塊,增長按鈕

• 刪除按鈕和增長按鈕都帶有一個click方法,而且都有v-show來根據food的數量來控制顯示,而顯示數量塊就只是單純顯示food的數量

<template>
  <div class="cartcontrol">
  <!--外層動畫-->
    <transition name="move">
      <div class="cart-decrease" v-show="food.count>0" @click="decreaseCart">
      <!--內層動畫-->
        <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="addCart"></div>
  </div>
</template>

js代碼

知識點:

• 引入vue模塊,由於須要使用Vue.set方法

• 接收來自goods.vue的food數據,而後使用

• 有2個方法,一個是addCart,一個是decreaseCart,分別對應html代碼中的@click

• addCart方法,默認會傳入event原生dom事件

  • 鑑於bsscrol插件的緣由,須要return掉非bscrol的事件

  • 須要注意的是這裏的food並無count屬性,所須要手動設置,雖然以前goods會將有count屬性的food作自動處理,可是最開始的時候,全部food都沒有count屬性,而且cartcontrol是最開始觸發對food的count屬性進行添加的(點擊一次就會對count++,增長一個food)

  • food數據是從父組件goods.vue傳入的,因此對這個數據的修改,也可以反應到父組件,而這裏使用Vue.set直接對vue的data進行對象數據寫入,對food數據添加了一個count的屬性,用來控制每個food的被選中的數量,也由於shopcart.vue的數據也是從父組件goods.vue傳入的,使用同一個food數據,從而關聯到[shopcart.vue購物車]()的food的購買數量統計

• decreaseCart方法,同上

<script>
  import Vue from 'vue';

  export default{
    props: {
      food: {
        type: Object
      }
    },
    methods: {
      addCart(event){
        if (!event._constructed) {
          return false;
        }
        if (!this.food.count) {
          Vue.set(this.food, 'count', 1); //遇到沒有這個屬性的,會強行添加一個
        } else {
          this.food.count++; 
        }
        this.$emit('add', event.target);
      },
      decreaseCart(event){
        if (!event._constructed) {
          return false;
        }
        if (this.food.count) {
          this.food.count--;
        }
      }
    }
  };
</script>

css代碼

知識點:

• vue2的動畫

  • Vue 提供了 transition 的封裝組件,就是以前的<transition>

  • 這個動畫是一個滾動淡入和淡出的效果

  • 首先,定義了這個動畫效果的名字爲move(<transition name="move">),而且將須要這個效果的內容用一個dom的div包裹起來,這個效果分2層,外層和內層inner(外層和內層用class來區分,經過增長一個內層class inner來區分)

  • 而後,設置原始的動畫狀態(外層和內層)

    • 外層設置了透明度爲1和transform變形的3d位置

    • 內層設置了滾動角度和淡入淡出效果

  • 而後,設置vue的動畫過渡屬性

    • move-enter-active和move-leave-active

      • 這裏設置勻速過渡效果是爲了在動畫進入過渡的結束狀態和動畫離開過渡的結束狀態都是勻速過渡的變化效果,至於變化成什麼效果須要看move-enter和move-leave-active

    • move-enter和move-leave-active

      • 這裏設置外層的透明度爲0(內層會繼承)和變形的3d位置

      • 這裏設置了內層滾動角度

      • 這麼作實現了動畫在進入過渡後和離開過渡後都會內外層,而且會出現內層一邊滾動到指定位置而後消失的效果

• font-size的使用

  • 由於使用行內元素,因此須要經過設置font-size爲0來取消間隙

• 對於一些設計上的圖標太小(操做區域過小)影響用戶操做體驗的狀況,須要增長一個padding來實現增大操做區域的目的

<style lang="stylus" rel="stylesheet/stylus">
  .cartcontrol
    font-size: 0
    .cart-decrease //外層動畫原始狀態
      display: inline-block
      padding: 6px
      opacity: 1 
      transform: translate3d(0, 0, 0) 
      .inner //內層動畫原始狀態
        display: inline-block
        line-height: 24px
        font-size: 24px
        color: rgb(0, 160, 220)
        transition: all 0.4s linear 
        transform: rotate(0)
      &.move-enter-active, &.move-leave-active //vue動畫過渡屬性     
        transition: all 0.4s linear
      &.move-enter, &.move-leave-active //vue動畫過渡屬性
        opacity: 0
        transform: translate3d(24px, 0, 0)
        .inner
          transform: rotate(180deg)
    .cart-count
      display: inline-block
      vertical-align: top
      width: 12px
      padding-top: 6px
      line-height: 24px
      text-align: center
      font-size: 10px
      color: rgb(147, 153, 159)
    .cart-add
      display: inline-block
      padding: 6px
      line-height: 24px
      font-size: 24px
      color: rgb(0, 160, 220)
</style>