Vant GoodsAction product navigation

May 07, 2021 Vant

Introduced

import Vue from 'vue';
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant';

Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);

Code demo

Basic usage

<van-goods-action>
  <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
  <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
  <van-goods-action-button type="warning" text="加入购物车" @click="onClickButton" />
  <van-goods-action-button type="danger" text="立即购买" @click="onClickButton" />
</van-goods-action>

import { Toast } from 'vant';

export default {
  methods: {
    onClickIcon() {
      Toast('点击图标');
    },
    onClickButton() {
      Toast('点击按钮');
    }
  }
}

Logo tip

The logo is displayed in the upper right corner of the icon through the info property

<van-goods-action>
  <van-goods-action-icon icon="chat-o" text="客服" />
  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />
  <van-goods-action-icon icon="shop-o" text="店铺" info="12" />
  <van-goods-action-button type="warning" text="加入购物车" />
  <van-goods-action-button type="danger" text="立即购买" />
</van-goods-action>

Customize the icon color

GoodsAction Icon's color properties allow you to customize the color of the icon

<van-goods-action>
  <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
  <van-goods-action-icon icon="cart-o" text="购物车" />
  <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
  <van-goods-action-button type="warning" text="加入购物车" />
  <van-goods-action-button type="danger" text="立即购买" />
</van-goods-action>

Customize the button color

GoodsActionButton's color properties allow you to customize the color of the button and support incoming linear-gradient gradient colors

<van-goods-action>
  <van-goods-action-icon icon="chat-o" text="客服" />
  <van-goods-action-icon icon="shop-o" text="店铺" />
  <van-goods-action-button color="#be99ff" type="warning" text="加入购物车" />
  <van-goods-action-button color="#7232dd" type="danger" text="立即购买" />
</van-goods-action>

Api

GoodsAction Props

Parameters	Description	Type	The default
safe-area-inset-bottom	Whether to turn on the bottom safety zone to fit	boolean	`false`

GoodsActionIcon Props

Parameters	Description	Type	The default
text	Button text	string	-
icon	Icon	string	-
color `v2.4.2`	The color of the icon	string	`#323233`
icon-class	Icon extra class name	any	-
info	The contents of the logo in the upper right corner of the icon	number \| string	-
Url	Click on the link address that jumps	string	-
to	Click to jump the target routing object, with the to property of vue-router	string \| object	-
replace	Whether to replace the current page history when jumping	boolean	`false`

GoodsActionButton Props

Parameters	Description	Type	The default
text	Button text	string	-
type	Button type, optional value `primary` `info` `warning` `danger`	string	`default`
color `v2.1.8`	Button color to support incoming `linear-gradient` colors	string	-
icon `v2.4.4`	The icon name or picture link on the left	string	-
disabled	Whether to disable the button	boolean	`false`
loading	Whether to show up as a load state	boolean	`false`
Url	Click on the link address that jumps	string	-
to	Click to jump the target routing object, with the to property of vue-router	string \| object	-
replace	Whether to replace the current page history when jumping	boolean	`false`

GoodsActionIcon Slots

Name	Description
default	The content of the text
icon	Custom icons

GoodsActionButton Slots

Name	Description
default	button to display the content