好资源导航 » 文章资讯 » Vue shopCart 组件开发详解

Vue shopCart 组件开发详解

2023-09-17 07:44:05 67

一、shopCart组件

(1)goods父组件和子组件shopCart传参

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

其中deliveryPrice和minPrice的数据都是从data.json数据中seller对象下获得。所以在goods组件中还要获取到seller对象的数据，否则会报错：

[Vuewarn]:Errorinrender:"TypeError:Cannotreadproperty'deliveryPrice'ofundefined"

解决方法：根组件App.vue中router-view组件获取seller数据，传到goods组件中

1-1.app.vue(根组件也是goods的父组件)

注意：sellerObj是data定义的对象里用来接收data.json数据，相当于实参

1-2.goods.vue(相对于跟组件的子组件且shopCart的父组件)

通过props属性进行组件之间的通信

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

1-3.shopCart.vue(goods的子组件)

(2)选中商品的计算功能

1-1.传入用户选中商品的集合

说明：从父组件会传入一个用户选中商品的数组，数组里会存放着n个对象，每个对象里存放着该商品的价格和数量。

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

1-2.利用计算属性选中商品数量的变化，商品总价，动态改变描述等功能

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

这样就渲染到template里了







{{totalCount}}

￥{{totalPrice}}

另需要配送费￥{{deliveryPrice}}元

=minPrice}"> {{payDesc}}

相关样式

&.active
colorwhite

&.enough
background#00b43c
colorwhite

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

二、cartControl组件

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

(1)新增属性count

说明：

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

方法：通过importVuefrom'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过渡

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

.cart-decrease
displayinline-block
padding6px
transition:all.4slinear/*过渡效果的CSS属性的名称、过渡效果需要多少时间、速度效果的速度曲线*/
.inner
line-height24px
font-size24px
colorrgb(0,160,220)
transitionall0.4slinear
&.move-enter-active,&.move-leave-active
transformtranslate3d(0,0,0)/*这样可以开启硬件加速，动画更流畅，3D旋转，X轴位移24px*/
.inner
displayinline-block/*设置成inline-block才有高度，才能有动画*/
transformrotate(0)
&.move-enter,&.move-leave-active
opacity:0
transformtranslate3d(24px,0,0)
.inner
transformrotate(180deg)

三、抛物线小球动画

通过两个层来控制小球，外层控制一个方向的变化，内层控制另外一个方向的变化（写两层才会有抛物线的效果），采用fixed布局（是相对于视口的动画）

事件发射和接收

组件之间传值-1

组件之间传值-2

扩展

Vue1.0组件间传递

使用$on()监听事件；
使用$emit()在它上面触发事件；
使用$dispatch()派发事件，事件沿着父链冒泡；
使用$broadcast()广播事件，事件向下传导给所有的后代

(1)Vue2.0组件之间传递数据

1-1.当点击添加数量时在cartControl组件里的addCount方法里通过$emit属性派发一个事件,传入点击的对象

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

1-2.操作goods组件

购物车组件如果提交了addCart事件就调用add函数

父组件使用@add="addFood"监听由子组件vm.$emit触发的事件，通过addFood()接受从子组件传递过来的数据，通知父组件数据改变了。

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

1-3.父组件访问子组件vue提供了接口ref

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

区别访问DOM变量

1-3.操作shopCart组件

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

methods:{
balldrop(ele){
//console.log(el)取到点击对象
for(vari=0;i
动画过程开始，利用vue提供的钩子函数
beforeEnter(el){//找到所以设为true的小球
letcount=this.balls.length
while(count--){
letball=this.balls[count];
if(ball.show){
letpos=ball.el.getBoundingClientRect()//返回元素相对于视口偏移的位置
letx=pos.left-32//点击的按钮与小球（fixed）之间x方向的差值
lety=-(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)`;
letinner=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-disableno-unused-vars*/
letrf=el.offsetHeight;
this.$nextTick(()=>{//异步执行
el.style.webkitTransform='translate3d(0,0,0)';//重置回来
el.style.transform='translate3d(0,0,0)';
letinner=el.getElementsByClassName('inner_hook')[0];
inner.style.webkitTransform='translate3d(0,0,0)';
inner.style.transform='translate3d(0,0,0)';
});
},
afterEnter(el){
letball=this.dropBalls.shift();//取到做完动画的球，再置为false，即重置，它还可以接着被利用
if(ball){
ball.show=false;
el.style.display='none';
}
}









&.drop-enter,&.drop-enter-active
transitionall0.4scubic-bezier(0.49,-0.29,0.75,0.41)
.inner
width16px
height16px
border-radius50%
backgroundrgb(0,160,220)
transitionall0.4slinear
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
                
            
              
            
                                    上一篇
Vue header组件开发详解
                
                                    下一篇
Java编程复用类代码详解
                            
            
            
                     
                热门推荐 
                                        1 毛坯房验收经验和常识 看了之后再验房心里有底  
                                        2 二手房收房如何交接 二手房收房注意问题  
                                        3 专业验收毛坯房的价格 商品房验收合格的标准  
                                        4 精装房怎么验收 精装房请验房师有用吗  
                                        5 一般要到哪里找验房师 验房师有哪些作用呢  
                                        6 请人验房一般是多少钱 验房师费用是多少  
                                        7 怎样测量房子面积 建筑面积和使用面积怎么算  
                                        8 收房需要注意什么 仔细检查不松懈  
                                        9 收房时三书一证一表是什么 主要作用介绍  
                                        10 交房时交房税费有哪些 本文为你一一讲解  
                                        11 验房都需要验什么 要做哪些准备呢  
                                        12 毛坯房验房师有必要请吗 毛坯房装修完如何验收  
                                        13 地下室防水工程质量验收规范详解  
                                        14 水性涂料、油性涂料区别介绍  
                                        15 零基础布艺DIY工坊 教你做超萌猫头鹰钥匙包  
                                        16 三棵树漆怎么样？三棵树漆官方网站  
                                        17 家庭“装修套餐”中猫腻你知道吗？  
                                        18 小空间大浴望 卫浴间装修巧支招  
                     
            
            
                
                
                
            
        
        
        
            
                随机推荐
                
                                            
                            SpringBoot 部署到服务器上的方法
                        
                                            
                            Vue 2.5.2下axios + express 本地请求404的解决方法
                        
                                            
                            自写的利用PDO对mysql数据库增删改查操作类
                        
                                            
                            Go语言中你不知道的Interface详解
                        
                                            
                            python如何实现int函数的方法示例
                        
                                            
                            C#中利用Lotus notes公共邮箱发送邮件的方法
                        
                                            
                            python中(str,list,tuple)基础知识汇总
                        
                                            
                            Python 反转字符串(reverse)的方法小结
                        
                                            
                            Python中单例模式总结
                        
                                            
                            Python中常见的异常总结
                        
                                            
                            mysql数据库忘记管理员密码的解决方法
                        
                                            
                            python中abs&map&reduce简介
                        
                                            
                            Centos7搭建FTP服务器
                        
                                            
                            nodejs微信扫码支付功能实现
                        
                                            
                            阿里云服务器apache配置SSL证书成功开启Https（记录趟过的各种坑）
                        
                                            
                            Python cookbook（数据结构与算法）让字典保持有序的方法
                        
                                    
            
            

                 
                
                
            
        
    



    
        
        返回顶部
    
    
        
            
            514930285
        
    
    
        
            
            czq8825@qq.com
        
    




    免责声明：网站资源来源于网络，如有侵权，请及时联系删除。
    Copyright © 2024 好资源导航网. All Rights Reserved.
    
        蜀ICP备2021004611号-4
        网站地图