传统的用html+jquery来实现购物车系统要非常的复杂,但是购物车系统完全是一个数据驱动的系统,因此采用诸如Vue.js、angular.js这些框架要简单的多。饿了吗开源的组件库Element是基于Vue.js 2.0实现的,该组件库封装了开发中需要的各种组件,并且提供了友好的API文档供开发者查看,下面就是我用Element实现的一个简单的购物车系统。(https://github.com/iwideal/MyGit/tree/master/HTML/shopping-cart)
首先,我们用Vue.js推荐的命令行工具来搭建项目骨架。
# 创建一个基于 webpack 模板的新项目
$ vue init webpack shopping-cart
# 安装依赖,走你
$ cd shopping-cart
$ npm install
$ npm run dev
这时候,生成的项目骨架如图:
这时候,我们要像maven一样,给项目添加依赖,在package.json文件中添加Element依赖:
"dependencies": {
"element-ui": "^1.1.6",
"vue": "^2.1.0"
},
添加完依赖之后,这是我们可以在项目中使用依赖了,在main.js文件中,导入ElementUI:
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' import App from './App.vue' Vue.use(ElementUI) /* eslint-disable no-new */ new Vue({ el: '#app', template: '<App/>', components: { App } })
重新安装依赖,走你:
$ cd shopping-cart
$ npm install
$ npm run dev
这时,我们在App.vue中,写入我们的购物车代码。
预览一下,整体效果如下:
一、创建购物车骨架,即复杂型的表格。我们这时可以从Element的官网(http://element.eleme.io/#/zh-CN/component/table)copy过来模板,我们选择带有checkbox的表格:
<template> <div> <el-table :data="tableData" border style=" 100%" @selection-change="selected"> <el-table-column type="selection" width="50"> </el-table-column> <el-table-column label="商品名称" width="680"> <template scope="scope"> <div style="margin-left: 50px"> <img :src="scope.row.goods.img" style="height: 50px; 50px"> <span style="font-size: 18px;padding-left: 200px;">{{scope.row.goods.descript}}</span> </div> </template> </el-table-column> <el-table-column label="单价" width="150" prop="price"> </el-table-column> <el-table-column label="数量" width="200"> <template scope="scope"> <div> <el-input v-model="scope.row.number" @change="handleInput(scope.row)"> <el-button slot="prepend" @click="del(scope.row)"><i class="el-icon-minus"></i></el-button> <el-button slot="append" @click="add(scope.row)"><i class="el-icon-plus"></i></el-button> </el-input> </div> </template> </el-table-column> <el-table-column label="小计" width="150" prop="goodTotal"> </el-table-column> <el-table-column label="操作"> <template scope="scope"> <el-button type="danger" @click="handleDelete(scope.$index, scope.row)"> 删除<i class="el-icon-delete2 el-icon--right"></i> </el-button> </template> </el-table-column> </el-table> <br> <el-button type="info" style="float: right">{{"商品总额:" + moneyTotal}}</el-button> </div> </template>
购物车骨架搭建好之后,我们就可以向里面插入数据了:
data() { return { tableData: [{ goods:{ img:'http://i1.mifile.cn/a1/pms_1474859997.10825620!80x80.jpg', descript:'小米手环2', }, price:149, number:1, goodTotal:149, },{ goods:{ img:'http://i1.mifile.cn/a1/pms_1482321199.12589253!80x80.jpg', descript:'小米活塞耳机 清新版 黑色', }, price:29, number:1, goodTotal:29, },{ goods:{ img:'http://i1.mifile.cn/a1/pms_1468288696.74437986!80x80.jpg', descript:'米家LED随身灯 增强版 蓝色', }, price:14.9, number:1, goodTotal:14.9, },{ goods:{ img:'http://i1.mifile.cn/a1/pms_1476688193.46995320.jpg?width=140&height=140', descript:'10000mAh小米移动电源2 银色', }, price:79, number:1, goodTotal:79, }], moneyTotal:0, multipleSelection:[], } }
这时候,我们需要对购物车中的各种事件做处理,包括删除商品、增加(减少)商品数量、选中商品等:
methods: { handleDelete(index, row) { this.$confirm('确定删除该商品?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { //删除数组中指定的元素 this.tableData.splice(index,1); this.$message({ type: 'success', message: '删除成功!' }); }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }); }); }, handleInput:function(value){ if(null==value.number || value.number==""){ value.number=1; } value.goodTotal=(value.number*value.price).toFixed(2);//保留两位小数 //增加商品数量也需要重新计算商品总价 this.selected(this.multipleSelection); }, add:function(addGood){ //输入框输入值变化时会变为字符串格式返回到js //此处要用v-model,实现双向数据绑定 if(typeof addGood.number=='string'){ addGood.number=parseInt(addGood.number); }; addGood.number+=1; }, del:function(delGood){ if(typeof delGood.number=='string'){ delGood.number=parseInt(delGood.number); }; if(delGood.number>1){ delGood.number-=1; } }, //返回的参数为选中行对应的对象 selected:function(selection){ this.multipleSelection=selection; this.moneyTotal=0; //此处不支持forEach循环,只能用原始方法了 for(var i=0;i<selection.length;i++){ //判断返回的值是否是字符串 if(typeof selection[i].goodTotal=='string'){ selection[i].goodTotal=parseInt(selection[i].goodTotal); }; this.moneyTotal+=selection[i].goodTotal; } },