GoodsAction 商品页行动点

使用指南

  1. import {
  2.   GoodsAction,
  3.   GoodsActionBigBtn,
  4.   GoodsActionMiniBtn
  5. } from 'vant';
  7. Vue
  8.   .use(GoodsAction)
  9.   .use(GoodsActionBigBtn)
  10.   .use(GoodsActionMiniBtn);

代码演示

基础用法

  1. <van-goods-action>
  2.   <van-goods-action-mini-btn icon="chat" text="客服" @click="onClickMiniBtn" />
  3.   <van-goods-action-mini-btn icon="cart" text="购物车" @click="onClickMiniBtn" />
  4.   <van-goods-action-big-btn text="加入购物车" @click="onClickBigBtn" />
  5.   <van-goods-action-big-btn text="立即购买" @click="onClickBigBtn" primary />
  6. </van-goods-action>
  1. export default {
  2.   methods: {
  3.     onClickMiniBtn() {
  4.       Toast('点击图标');
  5.     },
  6.     onClickBigBtn() {
  7.       Toast('点击按钮');
  8.     }
  9.   }
  10. }

图标提示

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

  1. <van-goods-action>
  2.   <van-goods-action-mini-btn icon="chat" text="客服" />
  3.   <van-goods-action-mini-btn icon="cart" text="购物车" info="5" />
  4.   <van-goods-action-mini-btn icon="shop" text="店铺" />
  5.   <van-goods-action-big-btn text="加入购物车" />
  6.   <van-goods-action-big-btn text="立即购买" primary />
  7. </van-goods-action>

API

GoodsActionMiniBtn

参数 说明 类型 默认值
text 按钮文字 String -
icon 图标 String -
icon-class 图标额外类名 String ''
info 图标右上角提示信息 String Number -
url 跳转链接 String -
to 路由跳转对象，同 vue-router 的 to String Object -
replace 跳转时是否替换当前 history String false

GoodsActionBigBtn

参数 说明 类型 默认值
text 按钮文字 String -
primary 是否主行动按钮，主行动按钮默认为红色 Boolean false
url 跳转链接 String -
to 路由跳转对象，同 vue-router 的 to String Object -
replace 跳转时是否替换当前 history String false

原文:

https://youzan.github.io/vant/#/zh-CN/goods-action