vue学习--组件化开发(五、购物车页面案例)

效果图：


代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      .container {
      }
      .container .cart {
        width: 300px;
        /*background-color: lightgreen;*/
        margin: auto;
      }
      .container .title {
        background-color: lightblue;
        height: 40px;
        line-height: 40px;
        text-align: center;
        /*color: #fff;*/
      }
      .container .total {
        background-color: #ffce46;
        height: 50px;
        line-height: 50px;
        text-align: right;
      }
      .container .total button {
        margin: 0 10px;
        background-color: #dc4c40;
        height: 35px;
        width: 80px;
        border: 0;
      }
      .container .total span {
        color: red;
        font-weight: bold;
      }
      .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 src="https://cdn.jsdelivr.net/npm/vue/dist/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: {
          del: function (id) {
            // 把id传递给父组件
            this.$emit('cart-del', id)
          },
          changeNum: function (id, event) {
            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',
            })
          },
        },
      }
      var CartTotal = {
        props: ['list'],
        template: `
                <div class="total">
            <span>总价：{{total}}</span>
            <button>结算</button>
          </div>
                `,
        computed: {
          total: function () {
            // 计算总价
            var t = 0
            this.list.forEach((element) => {
              t += element.price * element.num
            })
            return t
          },
        },
      }
      Vue.component('my-cart', {
        data: function () {
          return {
            uname: '张三',
            list: [
              {
                id: 1,
                name: 'TCL彩电',
                price: 1000,
                num: 1,
                img: 'img/a.jpg',
              },
              {
                id: 2,
                name: '机顶盒',
                price: 1000,
                num: 1,
                img: 'img/b.jpg',
              },
              {
                id: 3,
                name: '海尔冰箱',
                price: 1000,
                num: 1,
                img: 'img/c.jpg',
              },
              {
                id: 4,
                name: '小米手机',
                price: 1000,
                num: 1,
                img: 'img/d.jpg',
              },
              {
                id: 5,
                name: 'PPTV电视',
                price: 1000,
                num: 2,
                img: 'img/e.jpg',
              },
            ],
          }
        },
        template: `
                    <div class='cart'>
                        <cart-title :uname='uname'></cart-title>
                        <cart-list :list='list' @cart-del='delCart($event)' @change-num='changeNum($event)'></cart-list>
                        <cart-total :list='list'></cart-total>
                    </div>
                `,
        components: {
          'cart-title': CartTitle,
          'cart-list': CartList,
          'cart-total': CartTotal,
        },
        methods: {
          delCart: function (id) {
            // 根据id删除list中数据
            // 1.找到id对应所引
            var index = this.list.findIndex((item) => {
              return (item.id = id)
            })
            // 2.根据索引删除对应数据
            this.list.splice(index, 1)
          },
          changeNum: function (value) {
            // 根据子组件传过来的数据，更新list数据
            this.list.some((item) => {
              if (item.id == value.id) {
                if (value.type == 'add') {
                  item.num += 1
                } else if (value.type == 'sub') {
                  if (item.num > 1) {
                    item.num -= 1
                  }
                } else {
                  if (value.num <= 1) {
                    item.num = 1
                  } else {
                    item.num = value.num
                  }
                }
                return true
              }
            })
          },
        },
      })
      var vm = new Vue({
        el: '#app',
        data: {},
      })
    </script>
  </body>
</html>
posted @ 2020-04-12 22:11  一纸年华  阅读(4)  评论(0)  编辑  收藏  举报  来源