1. SubmitBar（提交栏）：
- 用于展示订单金额、配送信息等，并提供提交按钮。
- 示例：
<van-submit-bar
price="100"
tip="订单提交后将在2小时内开始配送"
button-text="提交订单"
@submit="onSubmit"
/>
2. Coupon（优惠券）：
- 用于展示优惠券列表，支持选择和展示已选中的优惠券。
- 示例：
<van-coupon-list :coupons="couponList" @change="onChange" />
3. AddressEdit（地址编辑）：
- 提供用户编辑和管理收货地址的功能。
- 示例：
<van-address-edit
:address-info="addressInfo"
show-delete
@save="onSave"
@delete="onDelete"
/>
4. Card（卡片）：
- 常用于展示商品信息、活动信息等。
- 示例：
<van-card
num="2"
desc="描述信息"
title="标题"
price="100"
thumb="https://example.com/thumb.jpg"
/>
5. GoodsAction（商品导航）：
- 用于展示商品的常见操作，如加入购物车、立即购买等。
- 示例：
<van-goods-action>
<van-goods-action-icon icon="chat-o" text="客服" />
<van-goods-action-icon icon="cart-o" text="购物车" />
<van-goods-action-button text="加入购物车" />
<van-goods-action-button text="立即购买" />
</van-goods-action>
6. Sku（商品规格弹层）：
- 提供商品规格选择的弹层，用户可以选择不同规格的商品。
- 示例：
<van-sku :sku="skuData" @buy="onBuy" />
以上只是一些 Vant 的业务组件示例，实际上 Vant 还提供了许多其他组件，涵盖了丰富的移动端开发场景。在使用这些组件时，你可以根据具体业务需求进行配置和定制。如果你有特定的业务场景或组件需要，可以查阅 Vant 的官方文档获取更详细的信息和示例。
转载请注明出处：http://www.zyzy.cn/article/detail/5702/Vant