vant实现购物车功能

下面是详细讲解 "vant 实现购物车功能" 的完整攻略：

概述

vant 是一套移动端的 Vue 组件库，它提供了丰富的 UI 布局和组件，包括轮播图、列表、按钮、输入框、弹出框等等常用的移动端组件，同时 vant 还提供了一些实用的 API，比如下拉刷新、无限滚动等等。vant 的组件库精简实用，特别适合开发移动端应用，本文将使用 vant 组件库来实现购物车功能。

实现步骤

1.安装 vant 组件库

使用 npm 或 yarn 安装 vant：

npm i vant -S

或者

yarn add vant

2. 配置 vant 组件库

在 main.js 中引入 vant 组件库，并注册所有组件：

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

3. 实现购物车组件

在购物车页面中，我们需要展示商品列表、总价、结算按钮等内容。使用 vant 组件库可以快速实现这些功能。

以实现商品列表为例，我们可以使用 vant 的 List 组件来展示商品列表：

<van-list>
  <van-cell v-for="item in list" :key="item.id" :title="item.name" :label="`¥${item.price}`" :icon="item.image">
    <van-stepper v-model="item.num" />
  </van-cell>
</van-list>

在上述代码中，我们使用了 vant 的 List 组件来展示商品列表，使用了 vant 的 Cell 组件来展示每个商品的信息，使用了 vant 的 Stepper 组件来实现商品数量的加减。

4. 实现加入购物车功能

要实现加入购物车功能，我们可以在商品列表中添加一个“加入购物车”按钮，点击按钮的时候，把商品的信息添加到购物车列表中。

可以使用 vant 的 Dialog 组件展示购物车信息，使用 vant 的 Popup 组件展示加入购物车成功的提示。

代码示例：

<van-button type="primary" @click="addToCart(item)">加入购物车</van-button>

<van-dialog v-model="cartVisible" title="购物车">
  <van-list>
    <van-cell v-for="item in cartList" :key="item.id" :title="item.name" :label="`¥${item.price} × ${item.num}`" @click="toDetail(item)">
      <van-icon slot="right-icon" name="cart-o" size="24" @click.stop="deleteFromCart(item)"/>
    </van-cell>
  </van-list>
  <van-button type="primary" block @click="checkout">结算 ¥{{ totalPrice }}</van-button>
</van-dialog>

<van-popup v-model="showAddSuccess" position="center">
  <van-icon name="check-circle-o" size="50" color="#1989fa" />
  <p>加入购物车成功</p>
</van-popup>

在 addToCart 方法中，把商品信息添加到 cartList 数组中，并且开启购物车弹窗 Dialog：

addToCart(item) {
  let cartItem = this.cartList.find(item => item.id === item.id)
  if (cartItem) {
    cartItem.num++
  } else {
    this.cartList.push({
      id: item.id,
      name: item.name,
      price: item.price,
      image: item.image,
      num: 1
    })
  }
  this.totalPrice += item.price
  this.showAddSuccess = true
  this.cartVisible = true
}

5. 实现删除购物车功能

在购物车列表中，我们可以使用 vant 的 Cell 组件添加删除按钮，点击删除按钮的时候，把商品信息从购物车列表中删除，并更新购物车总价。

代码示例：

<van-cell v-for="item in cartList" :key="item.id" :title="item.name" :label="`¥${item.price} × ${item.num}`" @click="toDetail(item)">
  <van-icon slot="right-icon" name="cart-o" size="24" @click.stop="deleteFromCart(item)"/>
</van-cell>

在 deleteFromCart 方法中，把商品信息从 cartList 数组中删除，并更新购物车总价：

deleteFromCart(item) {
  let index = this.cartList.findIndex(_item => _item.id === item.id)
  this.totalPrice -= item.price * item.num
  this.cartList.splice(index, 1)
}

至此，我们已经可以使用 vant 组件库快速实现购物车功能了。