餓了嗎開源組件庫Element模擬購物車系統

傳統的用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="width: 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;width: 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;
        }
      },