基于Vue组件化开发的购物车小练习-白红宇

基于Vue组件化开发的购物车小练习

阅读量：102 次

发布时间：2019-02-26

本文共 8147 字，大约阅读时间需要 27 分钟。

实现效果：

根据业务功能进行组件化划分

标题组件（展示文本）
列表组件（列表展示、商品数量变更、商品删除）
结算组件（计算商品总额）

实现代码：

<!DOCTYPE html><html lang="Zh"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        .container .cart {                width: 300px;            margin: auto;        }                .container .title {                background-color: lightblue;            height: 40px;            line-height: 40px;            text-align: center;            font-size: 20px;            font-weight: 700;        }                .container .total {                background-color: #FFCE46;            height: 50px;            line-height: 50px;            text-align: center;        }                .container .total button {                margin: 0 10px;            background-color: #DC4C40;            height: 35px;            width: 80px;            border: 0;        }                .container .total span {                color: red;            font-weight: bold;            font-size: 22px;        }                .container .item {                height: 55px;            line-height: 55px;            position: relative;            border-top: 1px solid #ADD8E6;        }                .container .item img {                width: 45px;            height: 45px;            margin: 5px;        }                .container .item .name {                position: absolute;            width: 90px;            top: 0;            left: 55px;            font-size: 16px;        }                .container .item .change {                width: 100px;            position: absolute;            top: 0;            right: 50px;        }                .container .item .change a {                font-size: 20px;            width: 30px;            text-decoration: none;            background-color: lightgray;            vertical-align: middle;        }                .container .item .change .num {                width: 40px;            height: 25px;        }                .container .item .del {                position: absolute;            top: 0;            right: 0px;            width: 40px;            text-align: center;            font-size: 40px;            cursor: pointer;            color: red;        }                .container .item .del:hover {                background-color: orange;        }    </style></head><body>    <div id="app">        <div class="container">            <my-cart></my-cart>        </div>    </div>    <script type="text/javascript" src="https://blog-static.cnblogs.com/files/jacklzx/vue.js"></script>    <script type="text/javascript">        var CartTitle = {                props: ['uname'],            template: `        <div class="title">{     {uname}}的商品</div>      `        }        var CartList = {                props: ['list'],            template: `<div>    <div :key='item.id' v-for='item in list' class="item">        <img :src="item.img" />        <div class="name">{     {item.name}}</div>        <div class="change">            <a href="" @click.prevent='sub(item.id)'>－</a>            <input type="text" class="num" :value='item.num' @blur='changeNum(item.id,$event)'>            <a href="" @click.prevent='add(item.id)'>＋</a>        </div>        <div class="del" @click='del(item.id)'>×</div>    </div></div>      `,            methods: {                    changeNum: function(id) {                        // console.log(id, event.target.value);                    this.$emit('change-num', {                            id: id,                        type: 'change',                        num: event.target.value                    });                },                sub: function(id) {                        this.$emit('change-num', {                            id: id,                        type: 'sub'                    });                },                add: function(id) {                        this.$emit('change-num', {                            id: id,                        type: 'add'                    });                },                del: function(id) {                        // console.log(id);                    // 把id传递给父组件                    this.$emit('cart-del', id);                }            }        }        var CartTotal = {                props: ['list'],            template: `        <div class="total">          <span>总价：{     {total}}</span>           </div>      `,            computed: {                    total: function() {                        // 计算商品的总价                    var t = 0;                    this.list.forEach(item => {                            t += item.price * item.num;                    });                    return t;                }            }        }        Vue.component('my-cart', {                data: function() {                    return {                        uname: 'Jack',                    list: [{                            id: 1,                        name: 'TCL彩电',                        price: 1000,                        num: 1,                        img: 'https://s3.ax1x.com/2020/12/02/DIhoGR.jpg'                    }, {                            id: 2,                        name: '机顶盒',                        price: 1000,                        num: 1,                        img: 'https://s3.ax1x.com/2020/12/02/DIhIi9.jpg'                    }, {                            id: 3,                        name: '海尔冰箱',                        price: 1000,                        num: 1,                        img: 'https://s3.ax1x.com/2020/12/02/DIh4IJ.jpg'                    }, {                            id: 4,                        name: '小米手机',                        price: 1000,                        num: 1,                        img: 'https://s3.ax1x.com/2020/12/02/DIhha4.jpg'                    }, {                            id: 5,                        name: 'PPTV电视',                        price: 1000,                        num: 2,                        img: 'https://s3.ax1x.com/2020/12/02/DIhfZF.jpg'                    }]                }            },            template: `        <div class='cart'>          <cart-title :uname='uname'></cart-title>          <cart-list :list='list' @change-num='changeNum($event)' @cart-del='delCart($event)'></cart-list>          <cart-total :list='list'></cart-total>        </div>      `,            components: {                    'cart-title': CartTitle,                'cart-list': CartList,                'cart-total': CartTotal            },            methods: {                    changeNum: function(val) {                        // console.log(val);                    // 三种情况:输入域变更，加号、减号                    if (val.type === 'change') {                            // 根据子组件传来的数据，更新list中对应的数据                        this.list.some(item => {                                if (item.id === val.id) {                                    item.num = val.num;                                return true; // 终止遍历                            }                        });                    } else if (val.type === 'sub') {                            this.list.some(item => {                                if (item.id === val.id) {                                    item.num--                                    return true; // 终止遍历                            }                        });                    } else {                            this.list.some(item => {                                if (item.id === val.id) {                                    item.num++                                    return true; // 终止遍历                            }                        });                    }                },                delCart: function(id) {                        // 根据id删除list中的数据                    // 1. 找到id所对应的索引                    let index = this.list.findIndex(item => {                            return item.id === id;                    });                    // 根据索引删除对应的数据                    this.list.splice(index, 1);                }            }        });        var vm = new Vue({                el: '#app',            data: {    }        });    </script></body></html>