Vue项目实战：购物车页面实现与ElementUI集成

最新推荐文章于 2024-08-17 16:03:52 发布

林夏天

最新推荐文章于 2024-08-17 16:03:52 发布

阅读量5.9k

点赞数 7

分类专栏： Vue.js项目实战:从零独立开发企业级电商系统文章标签： vue babel 前端 vue.js javascript

本文链接：https://blog.csdn.net/weixin_46124214/article/details/105342005

版权

这篇博客详细介绍了如何在Vue项目中实现购物车页面，包括Order-Header组件、购物车列表渲染、全选与非全选功能、商品更新与删除以及结算流程。同时，文章还讲解了ElementUI的集成方法，以及Babel在项目中的应用，用于将ES6+代码转换为兼容性的JavaScript语法。

摘要由CSDN通过智能技术生成

购物车页面

（1）Order-Header组件

在Order-Header.vue中：

<template>
    <div class="order-header">
        <div class="container clearfix">
            <div class="header-logo">
                <a href="/#/index"></a>
            </div>
            <div class="title">
                <h2>{
  {title}}<slot name="tip"></slot></h2>
            </div>
            <div class="username">
                <a href="javascript:;">{
  {username}}</a>
            </div>
        </div>
    </div>
</template>
<script>
import {
    mapState} from 'vuex'
export default {
    
    name:'order-header',
    props: {
    
        title:String, 
    },
    computed: {
    
        ...mapState(['username'])
    }
}
</script>
<!--省略样式-->

在使用该样式的文件中：

        <order-header title="我的购物车">
            <template v-slot:tip>
                <span>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算。</span>
            </template>    
        </order-header>

（2）购物车列表渲染

在cart.vue中：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s2gwmOkK-1586148382756)(C:\Users\lin\AppData\Roaming\Typora\typora-user-images\1585986466180.png)]$

        <div class="cart-box">       
          <ul class="cart-item-head">
            <li class="col-1"><span class="checkbox" v-bind:class="{
    'checked':allChecked}"></span>全选</li>
            <li class="col-3">商品 名称</li>
            <li class="col-1">单价</li>
            <li class="col-2">数量</li>
            <li class="col-1">小计</li>
            <li class="col-1">操作</li>
          </ul>
            
          <ul class="cart-item-list">
            <li class="cart-item" v-for="(item,index) in list" v-bind:key="index">
              <div class="item-check">
                <