Vue shopCart 组件开发详解(2)

日期：2020-05-11 栏目：程序人生浏览：次

这样就渲染到 template 里了

<div class="shopCart">
 <div class="content">
  <div class="content-left">
 <div class="logo-wrapper"> 
 <!--徽章 展示选中商品的个数-->
 <div class="badge" v-show="totalCount">
 {{totalCount}}
 </div>
 <!--购物车 图标 选择商品和未选择商品 时 动态改变 样式 条件：只要选择了商品即总价不为0 ，样式变--> 
  <div class="logo" :class="{'active':totalCount}">
   <i class="icon-shopping_cart"></i>
  </div>
 </div>
 <!--同理： 总价 不为0 字体高亮-->
 <div class="price" :class="{'active':totalPrice}">
  ￥{{totalPrice}}
 </div>
 <!--配送费 data.json 提供-->
 <div class="desc">
  另需要配送费￥{{deliveryPrice}}元
 </div>
  </div>
  <!--根据条件  动态 改变样式-->
  <div class="content-right" :class="{'enough':totalPrice>=minPrice}">  
 {{payDesc}}  
 </div>
 </div>
</div>

相关样式

&.active
  color white
  
&.enough
  background #00b43c
  color white

总结：通过以上学习我们能发现，selectFoods()的变化起着关键作用，它的变化会引起DOM的变化，并最终体现到界面上，而我们不用关注DOM内部的具体实现，这就是vue的一大好处。如果采用jQuery完成这些功能会略显繁杂。

二、cartControl 组件

说明：这个组件是控制购物车小球的。其中涉及到小球的动画

(1) 新增属性 count

说明：

在goods 下的 foods 添加一个属性 count,用来存储用户选中的商品个数,计算商品总价以及关联徽章（显示用户选择商品的个数）的变化

方法：通过import Vue from 'vue';使用set接口，通过vue.set()添加属性，当它变化时就能被检测到，从而父组件能获取到count值（遍历选中的商品时使用）

methods:{
 addCart(event){ // 点击count 加，
  //console.log(event.target);
 if (!event._constructed) { // 去掉自带click事件的点击
    return;
   }
 if(!this.foodsele.count){
 Vue.set(this.foodsele, 'count', 1)
 }else{
 this.foodsele.count++
 }  
 },
 decreaseCart (event){ // 点击减少
 if (!event._constructed) { // 去掉自带click事件的点击
    return;
    }
 if(this.foodsele.count){
 this.foodsele.count --
  } 
  }
}

(2)添加按钮实现transtion 过渡

我们要实现的效果是：当点击添加按钮时，减少按钮出现并伴随着旋转、平移以及透明度变化的一些动画效果

<transition name='move'> <!--平移动画-->  
 <div class="cart-decrease" v-show="foodsele.count" @click='decreaseCart($event)'>
  <span class="icon-remove_circle_outline inner"></span><!--旋转、透明度动画--> 
  </div>
</transition>

转载注明出处：http://www.heiqu.com/216.html

Vue shopCart 组件开发详解(2)

相关推荐