Vue shopCart 组件开发详解

deliveryPrice:{ // 单价 从json seller 对象数据中获取 type:Number, default:0},minPrice:{ // 最低起送价 从json seller 对象数据中获取 type:Number, default:20}

<keep-alive> <router-view :sell="sellerObj"></router-view></keep-alive>

props: {  sell: Object // 相当于 形参 },

<shopCart :delivery-price="sell.deliveryPrice" :min-price="sell.minPrice"></shopCart>

props:{       // 通过父组件传过来的 ( 相当于形参 ) selefoodsArr:{   // 用户选中的商品存放在一个数组里  接收的是 data.json数据的 goods（数组） type:Array, // 当父组件传过来的 类型是对象或者 是数组时， default 就是一个函数 default (){ return []  // 返回数组 存放着选中 商品 对应的 goods下的 foods 数组（由 父组件 的 实参 决定的返回值） }}

computed:{ totalPrice (){     //计算总价，超过起送额度后提示可付款 let total=0   // 定义一个返回值 this.selefoodsArr.forEach((rfoods) =>{ // 遍历 这个 goods 数组 取到 价格 和 数量 （当然在这里数据库没有count 这个属性，稍后 我们会利用 vue.set() 新建一个count 属性）  total += rfoods.price * rfoods.count // 形参 rfoods 实参 是 foods }); return total; }, totalCount (){   // //计算选中的food数量，在购物车图标处显示，采用绝对定位，top：0；right：0；显示在购物车图标右上角   let count=0 this.selefoodsArr.forEach((rfoods) =>{ // 形参 rfoods 实参 是 foods  count += rfoods.count }); return count; }, payDesc (){    //控制底部右边内容随food的变化而变化，payDesc()控制显示内容，enough 添加类调整显示样式 let diff = this.minPrice - this.totalPrice    if (!this.totalPrice) {     return `￥${this.minPrice}起送`    } else if (diff > 0) {     return `还差￥${diff}元`    } else {     return '去结算'    } }  }

<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

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 --  }   }}

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

 .cart-decrease  display inline-block  padding 6px  transition: all .4s linear  /*过渡效果的 CSS 属性的名称、过渡效果需要多少时间、速度效果的速度曲线*/    .inner   line-height 24px   font-size 24px   color rgb(0,160,220)   transition all 0.4s linear  &.move-enter-active, &.move-leave-active   transform translate3d(0,0,0) /* 这样可以开启硬件加速，动画更流畅，3D旋转，X轴位移24px */   .inner       display inline-block  /* 设置成inline-block才有高度，才能有动画 */    transform rotate(0)  &.move-enter, &.move-leave-active   opacity: 0   transform translate3d(24px,0,0)   .inner    transform rotate(180deg)

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++ }// 当点击 添加数量时 通过 $emit 属性 提交一个名为 add 给父组件// 子组件通过 $emit触发 add事件 ，将参数传递给父组件 this.$emit('add', event.target);}

 <cart-control :foodsele='food' @add="addFood"></cart-control>

addFood(target) {  this._drop(target);}

_drop(target) {  // 体验优化,异步执行下落动画  this.$nextTick(() => {   this.$refs.shopCart.balldrop(target);// 将target传入shopCart子组件中的balldrop方法，所以drop方法能获得用户点击按钮的元素，即能获取点击按钮的位置  });}  

data (){ // 定义一个数组 来 控制小球的状态  定义多个对象，表示页面中做多同时运动的小球 return{ // 定义 5 个 小球   balls:[{show:false},{show:false},{show:false},{show:false},{show:false}], dropBalls:[] // 接收下落小球  }}

methods:{ balldrop(ele) {// console.log(el) 取到点击 对象   for(var i=0;i<this.balls.length;i++){    let ball=this.balls[i]    if(!ball.show){     ball.show=true     ball.ele=ele     this.dropBalls.push(ball)     return;    }   }         }}

beforeEnter (el){ //找到所以设为true的小球 let count=this.balls.length while(count--){ let ball = this.balls[count]; if(ball.show){  let pos=ball.el.getBoundingClientRect() //返回元素相对于视口偏移的位置  let x=pos.left-32  // 点击的按钮与小球（fixed）之间x方向的差值  let y=-(window.innerHeight-pos.top-22)  el.style.display = '';  //设置初始位置前，手动置空，覆盖之前的display：none，使其显示       el.style.webkitTransform = `translate3d(0,${y}px,0)`; //外层元素做纵向的动画，y是变量       el.style.transform = `translate3d(0,${y}px,0)`;       let inner = el.getElementsByClassName('inner_hook')[0];//内层元素做横向动画,inner-hook（用于js选择的样式名加上-hook，表明只是用                                   //于js选择的，没有真实的样式含义）       inner.style.webkitTransform = `translate3d(${x}px,0,0)`;       inner.style.transform = `translate3d(${x}px,0,0)`; } } },   enter(el) {    /* eslint-disable no-unused-vars */   let rf = el.offsetHeight;   this.$nextTick(() => {//异步执行   el.style.webkitTransform = 'translate3d(0,0,0)';  //重置回来   el.style.transform = 'translate3d(0,0,0)';   let inner = el.getElementsByClassName('inner_hook')[0];   inner.style.webkitTransform = 'translate3d(0,0,0)';   inner.style.transform = 'translate3d(0,0,0)';  }); }, afterEnter(el) {  let ball = this.dropBalls.shift(); //取到做完动画的球，再置为false，即重置，它还可以接着被利用  if (ball) {   ball.show = false;   el.style.display = 'none';  } }

<div class="ball-container">  <div v-for="ball in balls">   <transition name="drop" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">    <div class="ball" v-show="ball.show">     <div class="inner inner_hook"></div>    </div>   </transition>  </div></div>

&.drop-enter,&.drop-enter-active    transition all 0.4s cubic-bezier(0.49,-0.29,0.75,0.41)    .inner     width 16px     height 16px     border-radius 50%     background rgb(0,160,220)     transition all 0.4s linear