GoodsAction 商品导航

引入

  1. import{
  2. GoodsAction,
  3. GoodsActionIcon,
  4. GoodsActionButton
  5. }from'vant';
  6. Vue
  7. .use(GoodsAction)
  8. .use(GoodsActionIcon)
  9. .use(GoodsActionButton);

代码演示

基础用法

  1. <van-goods-action>
  2. <van-goods-action-icon
  3. icon="chat-o"
  4. text="客服"
  5. @click="onClickIcon"
  6. />
  7. <van-goods-action-icon
  8. icon="cart-o"
  9. text="购物车"
  10. @click="onClickIcon"
  11. />
  12. <van-goods-action-button
  13. type="warning"
  14. text="加入购物车"
  15. @click="onClickButton"
  16. />
  17. <van-goods-action-button
  18. type="danger"
  19. text="立即购买"
  20. @click="onClickButton"
  21. />
  22. </van-goods-action>
  1. exportdefault{
  2. methods:{
  3. onClickIcon(){
  4. Toast('点击图标');
  5. },
  6. onClickButton(){
  7. Toast('点击按钮');
  8. }
  9. }
  10. }

图标提示

通过info属性在图标右上角增加相应的提示

  1. <van-goods-action>
  2. <van-goods-action-icon
  3. icon="chat-o"
  4. text="客服"
  5. />
  6. <van-goods-action-icon
  7. info="5"
  8. icon="cart-o"
  9. text="购物车"
  10. />
  11. <van-goods-action-icon
  12. icon="shop-o"
  13. text="店铺"
  14. />
  15. <van-goods-action-button
  16. type="warning"
  17. text="加入购物车"
  18. />
  19. <van-goods-action-button
  20. type="danger"
  21. text="立即购买"
  22. />
  23. </van-goods-action>

API

GoodsAction Props

参数说明类型默认值版本
safe-area-inset-bottom是否开启 iPhone X 底部安全区适配,需要在 viewport meta 标签中设置 viewport-fit=coverBooleanfalse1.6.15

GoodsActionIcon Props

参数说明类型默认值版本
text按钮文字String--
icon图标String--
icon-class图标额外类名any--
info图标右上角提示信息String | Number--
url跳转链接String--
to路由跳转对象,同 vue-router 的 toString | Object--
replace跳转时是否替换当前页面历史Booleanfalse-

GoodsActionButton Props

参数说明类型默认值版本
text按钮文字String--
type按钮类型,可选值为 primaryinfowarningdangerStringdefault
disabled是否禁用按钮Booleanfalse-
loading是否显示为加载状态Booleanfalse-
url跳转链接String--
to路由跳转对象,同 vue-router 的 toString | Object--
replace跳转时是否替换当前页面历史Booleanfalse-

GoodsAction 商品导航 - 图1