spz-cart 购物车

实现购物车。

布局

container

何时使用

需要展示购物车数据，一般用在购物车页面或者购物车侧边弹窗。

代码演示

基本用法

<spz-cart id="cart" layout="container" summary-id="#cart-summary-render" empty-item="cart.line_items" @cartIncrease="..." @cartDecrease="...">
  <template>
    <div>
      <!-- 购物车商品 ... -->
    </div>
  </template>
</spz-cart>

<!-- 购物车结账内容 -->
<spz-render id="cart-summary-render" layout="container" manual>
  <template>
    <!-- ... -->
    <button type="button" @tap="cart.checkout;">
      Checkout
    </button>
  </template>
</spz-render>

属性

属性名	说明	类型	默认值	是否必需
summary-id	指定结账内容元素的`id`，支持响应式。当配置的元素时 `spz-render` 时，购物车变更时会自动重新渲染该元素。形式如 `#cart-summary-render`	string	-	否
note-id	指定购物车留言元素的`id`，支持响应式，该元素必须可以通过 `value` 属性来获取留言内容，例如：`textarea`, `input` 等元素。形式如 `#cart-note`	string	-	否
empty-items	获取购物车数据的路径	string	`cart.line_items`	否

方法

render

渲染购物车内容，不需要参数。

update

更新某个购物车商品。

参数	说明	类型	默认值	是否必须
id	商品数据的 `id` 属性	string	-	是
value	商品的要更新的数量	string	-	是

delete

删除某个购物车商品。

参数	说明	类型	默认值	是否必须
id	商品数据的 `id` 属性	string	-	是

checkout

购物车商品结账到订单，不需要参数。

事件

mounted

当购物车首次渲染完成的时候自动触发该事件。

cartEmpty

当购物车为空时自动触发该事件。

cartChange

当删除，减少/增加购物车里的商品时自动触发该事件。

cartDelete

当删除购物车里的商品时自动触发该事件。

cartIncrease

当增加购物车里的商品数量时自动触发该事件。

cartDecrease

当减少购物车里的商品数量时自动触发该事件。