引入
import Vue from 'vue';
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant';
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
代码演示
基础用法
<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('点击按钮');
}
}
}
徽标提示
通过info属性在图标右上角显示徽标
<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>
自定义图标颜色
通过 GoodsActionIcon 的color属性可以自定义图标的颜色
<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>
自定义按钮颜色
通过 GoodsActionButton 的color属性可以自定义按钮的颜色,支持传入linear-gradient渐变色
<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
参数 |
说明 |
类型 |
默认值 |
safe-area-inset-bottom |
是否开启 底部安全区适配 |
boolean |
false |
GoodsActionIcon Props
参数 |
说明 |
类型 |
默认值 |
text |
按钮文字 |
string |
– |
icon |
图标 |
string |
– |
color v2.4.2 |
图标颜色 |
string |
#323233 |
icon-class |
图标额外类名 |
any |
– |
info |
图标右上角徽标的内容 |
number | string |
– |
url |
点击后跳转的链接地址 |
string |
– |
to |
点击后跳转的目标路由对象,同 vue-router 的 to 属性 |
string | object |
– |
replace |
是否在跳转时替换当前页面历史 |
boolean |
false |
GoodsActionButton Props
参数 |
说明 |
类型 |
默认值 |
text |
按钮文字 |
string |
– |
type |
按钮类型,可选值为 primary info warning danger |
string |
default |
color v2.1.8 |
按钮颜色,支持传入linear-gradient 渐变色 |
string |
– |
icon v2.4.4 |
左侧 图标名称 或图片链接 |
string |
– |
disabled |
是否禁用按钮 |
boolean |
false |
loading |
是否显示为加载状态 |
boolean |
false |
url |
点击后跳转的链接地址 |
string |
– |
to |
点击后跳转的目标路由对象,同 vue-router 的 to 属性 |
string | object |
– |
replace |
是否在跳转时替换当前页面历史 |
boolean |
false |
GoodsActionIcon Slots
名称 |
说明 |
default |
文本内容 |
icon |
自定义图标 |
GoodsActionButton Slots
转载请注明:www.ainoob.cn » Vant GoodsAction 商品导航