Vue shopCart 组件开发详解
一、shopCart组件(1) goods 父组件和 子组件 shopCart 传参 其中 deliveryPrice 和 minPrice 的数据都是从 data.json数据 中 seller 对象下 获得。所以在goods 组件中还要 获取到 seller对象 的数据，否则会报错：
解决方法：根组件 App.vue 中 router-view 组件获取seller 数据，传到 goods 组件中 1-1.app.vue (根组件 也是 goods 的父组件) 注意：sellerObj 是data 定义 的 对象里用来接收 data.json 数据，相当于 实参 1-2.goods.vue (相对于跟组件的子组件 且 shopCart 的父组件) 通过props 属性 进行组件之间的通信 1-3.shopCart.vue ( goods 的子组件) (2) 选中商品 的 计算功能 1-1. 传入用户选中商品的集合 说明：从父组件会 传入一个用户选中商品的 数组，数组里会存放着 n 个对象，每个对象里存放着该 商品的 价格 和 数量。 1-2. 利用计算属性 选中商品数量的变化，商品总价，动态改变描述等功能 { // 遍历 这个 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 '去结算'
}
}
}
这样就渲染到 template 里了 相关样式 &.enough
background #00b43c color white 总结：通过以上学习我们能发现，selectFoods()的变化起着关键作用，它的变化会引起DOM的变化，并最终体现到界面上，而我们不用关注DOM内部的具体实现，这就是vue的一大好处。如果采用jQuery完成这些功能会略显繁杂。 二、cartControl 组件说明：这个组件是控制购物车小球的。其中涉及到小球的动画 (1) 新增属性 count 说明： 在goods 下的 foods 添加一个属性 count,用来存储用户选中的商品个数,计算商品总价 以及 关联徽章（显示用户选择商品的个数）的变化 方法：通过import Vue from 'vue';使用set接口，通过vue.set()添加属性，当它变化时就能被检测到，从而父组件能获取到count值（遍历选中的商品时使用） (2)添加按钮 实现transtion 过渡 我们要实现的效果是：当点击添加按钮时，减少按钮出现 并伴随着 旋转、平移以及透明度变化的 一些 动画效果 三、抛物线小球动画通过两个层来控制小球，外层控制一个方向的变化，内层控制另外一个方向的变化（写两层才会有抛物线的效果），采用fixed布局（是相对于视口的动画） 事件发射和接收 扩展Vue1.0组件间传递
(1) Vue2.0 组件之间传递数据 1-1. 当点击 添加数量时 在 cartControl 组件里的 addCount 方法里 通过 $emit 属性 派发一个事件,传入点击的对象 1-2. 操作 goods 组件 购物车组件如果提交了addCart事件就调用add函数 父组件使用 @add="addFood"监听由子组件vm.$emit触发的事件，通过addFood()接受从子组件传递过来的数据，通知父组件数据改变了。 1-3. 父组件访问子组件 vue 提供了接口 ref 代码如下: {
this.$refs.shopCart.balldrop(target);// 将target传入shopCart子组件中的balldrop方法，所以drop方法能获得用户点击按钮的元素，即能获取点击按钮的位置
});
}
区别 访问DOM 变量1-3. 操作 shopCart 组件 动画过程开始，利用vue 提供的钩子函数 {//异步执行
el.style.webkitTransform = 'translate3d(0,0)'; //重置回来
el.style.transform = 'translate3d(0,0)';
let inner = el.getElementsByClassName('inner_hook')[0];
inner.style.webkitTransform = 'translate3d(0,0)';
inner.style.transform = 'translate3d(0,0)';
});
},afterEnter(el) {
let ball = this.dropBalls.shift(); //取到做完动画的球，再置为false，即重置，它还可以接着被利用
if (ball) {
ball.show = false;
el.style.display = 'none';
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |