Vue实现购物车功能

使用Vue组件完成一个带自动计算、删除、修改、选择、搜索、添加功能的购物车功能

效果预览：

 

步骤：

1.创建子组件：

里面存放的是我们需要传输给购物车的内容，运用父子组件传值（props，$emit）完成传输。

2.页面布局：

简单实现页面效果。

			

				
			
			

				

					

						
						
 商品名称：{{i.name}}
						
 商品价格：{{i.price}}元
						添加至购物车
					
				
			
			

				
购物车
				

					

						选择
					
					

						编号
					
					

						商品名称
					
					

						单价
					
					

						数量
					
					

						操作
					
				
				
				
				
您的购物车内暂无商品，快去选购吧
				

					全选
				
				
总价：￥{{total}}元
			
		

3.样式文件：

（此处与页面布局依照自己喜好即可）。

body {
				font-size: 18px;
			}

			.find {
				width: 604px;
				height: 90px;
				margin: 0 auto;
			}

			.find input {
				margin-top: 10px;
				width: 600px;
				height: 40px;
				border: 2px solid #eebbbb;
				border-radius: 25px;
			}

			#BOX {
				width: 1200px;
				margin: 0 auto;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				font-size: 12px;
			}

			#boxs {
				width: 185px;
				border: 1px solid #eac2c2;
				border-radius: 6px;
			}

			#boxs p {
				padding-left: 10px;
			}

			#boxs img {
				width: 167px;
				height: 150px;
				margin: 4% 5%;
				border-radius: 7px;
			}

			#boxs button {
				margin: 0 18% 4%;
				background-color: #eac2c2;
				border: none;
				height: 35px;
				width: 120px;
				border-radius: 5px;
				font-family: '宋体';
				color: aliceblue;
			}

			.form-content {
				width: 1200px;
				margin: 0 auto;
			}

			.content {
				width: 1200px;
				margin: 0 auto;
				margin-bottom: 70px;
			}

			.goods-content {
				line-height: 60px;
				width: 1200px;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
			}

			.goods-content div {
				display: inline-block;
				margin-bottom: 1px;
				font-size: 15px;
			}

			.goods-select {
				width: 3%;
				text-align: center;
			}

			.goods-id {
				width: 20%;
				text-align: center;
			}

			.goods-id img {
				width: 100px;
				margin-top: 18px;
			}

			.goods-name {
				width: 37%;
			}

			.goods-price {
				width: 10%;
				text-align: center;
			}

			.goods-number {
				width: 20%;
				text-align: center;
			}

			.goods-opt {
				width: 10%;
				text-align: center;
			}

			.goods-opt button {
				width: 60px;
				height: 30px;
			}

			.goods-content input {
				height: 20px;
				width: 16px;
			}

			.total {
				background: #eac2c2;
				width: 1200px;
				text-align: right;
				margin: 0 auto;
				margin-top: 30px;
				position: fixed;
				bottom: 0;
			}

			#bl {
				width: 1200px;
				margin: 0 auto;
				text-align: center;
				font-size: 30px;
				font-family: '宋体';
				color: #ccc;
			}

			#AllSelect {
				background: #eac2c2;
				width: 1200px;
				margin: 0 auto;
				height: 50px;
				position: fixed;
				bottom: 20px;
			}

4.实现购物车中无商品时显示“您的购物车内暂无商品，快去选购吧”，有商品时文字消失功能：

使用监听属性对购物车数组进行监听，当数组长度为0时，display设置为block，也就是显示样式，当数组长度不为0时，display设置为none，不显示样式。

watch: {
				goodsList ()
				{
					if ( this.goodsList.length !== 0 )
					{
						document.getElementById( 'bl' ).style.display = 'none';
					} else
					{
						document.getElementById( 'bl' ).style.display = 'block';
					}
				}
			}

5.实现加入购物车功能：

使用push（）进行对数组元素的添加。

insert ( i )
				{
					if ( this.goodsList == '' )
					{
						this.goodsList.push( i )
					} else
					{
						if ( this.goodsList.includes( i ) )
						{
							var index = this.goodsList.indexOf( i )
							this.goodsList[ index ].number++
						} else
						{
							this.goodsList.push( i )
						}
					}
				}

5.实现删除购物车内容功能：

使用splice（）进行对数组元素的删除。

del ( index )
				{
					this.goodsList.splice( index, 1 );
				}

6.实现全选按钮功能：

用every（）（用于遍历数组中所有元素，只要有一项不符合要求，便返回false，全符合要求则返回true）实现其他按钮全部被选中时，全选按钮也被选中，用forEach（）（用于调用数组的每个元素，并将元素传递给回调函数）实现点击全选按钮其他按钮全部被选中效果。

computed: {
				allCheck: {
					get ()
					{
						if ( this.goodsList.length == 0 )
						{
							select = false;
						} else
						{
							return this.goodsList.every( i => i.select )
						}
					},
					set ( val )
					{
						this.goodsList.forEach( Element =>
						{
							Element.select = val;
						} );
					}
				}
}

7.实现合计计算功能：

对数组进行遍历，如果是选中状态则用数量乘上价格进行相加，未被选中的不参与计算。

computed: {
				total ()
				{
					var money = 0;
					for ( var i = 0; i < this.goodsList.length; i++ )
					{
						if ( this.goodsList[ i ].select == true )
						{
							money += ( parseFloat( this.goodsList[ i ].price ) *
								parseFloat( this.goodsList[ i ].number ) );
						}
					}
					return money;
				}
			}

8.实现搜索框功能：

使用filter（）方法过滤数组中元素，indexOf（）方法返回指定字符串。

computed: {
				finishs ()
				{
					return this.BoxImg.filter( ( item ) =>
					{
						return item.name.indexOf( this.find ) !== -1
					} )
				}
			}

完整代码：

	
		
		
		
		
	

	
		

			

				
			
			

				

					

						
						
 商品名称：{{i.name}}
						
 商品价格：{{i.price}}元
						添加至购物车
					
				
			
			

				
购物车
				

					

						选择
					
					

						编号
					
					

						商品名称
					
					

						单价
					
					

						数量
					
					

						操作
					
				
				
				
				
您的购物车内暂无商品，快去选购吧
				

					全选
				
				
总价：￥{{total}}元