ActionBar 动作栏
引入
通过以下方式来全局注册组件,更多注册方式请参考组件注册。
基础用法
<van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" />
<van-action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" />
<van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" />
<van-action-bar-button type="danger" text="立即购买" @click="onClickButton" />
</van-action-bar>
徽标提示
<van-action-bar>
<van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
<van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
<van-action-bar-button type="warning" text="加入购物车" />
</van-action-bar>
通过 ActionBarIcon 的 color
属性可以自定义图标的颜色。
自定义按钮颜色
<van-action-bar>
<van-action-bar-icon icon="chat-o" text="客服" />
<van-action-bar-icon icon="shop-o" text="店铺" />
<van-action-bar-button color="#be99ff" type="warning" text="加入购物车" />
<van-action-bar-button color="#7232dd" type="danger" text="立即购买" />
</van-action-bar>
ActionBar Props
ActionBarIcon Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
text | 按钮文字 | string | - |
icon | 图标 | string | - |
color | 图标颜色 | string | #323233 |
icon-class | 图标额外类名 | string | Array | object | - |
icon-prefix | 图标类名前缀,等同于 Icon 组件的 class-prefix 属性 | string | van-icon |
dot | 是否显示图标右上角小红点 | boolean | false |
badge | 图标右上角徽标的内容 | number | string | - |
badge-props v3.2.8 | 自定义徽标的属性,传入的对象会被透传给 | BadgeProps | - |
url | 点击后跳转的链接地址 | string | - |
to | 点击后跳转的目标路由对象,等同于 vue-router 的 to 属性 | string | object | - |
replace | 是否在跳转时替换当前页面历史 | boolean | false |
ActionBarIcon Slots
名称 | 说明 |
---|---|
default | 文本内容 |
icon | 自定义图标 |
ActionBarButton Slots
类型定义
组件导出以下类型定义:
名称 | 默认值 | 描述 |
---|---|---|
—van-action-bar-background-color | var(—van-background-color-light) | - |
—van-action-bar-height | 50px | - |
—van-action-bar-icon-width | 48px | - |
—van-action-bar-icon-height | 100% | - |
—van-action-bar-icon-color | var(—van-text-color) | - |
—van-action-bar-icon-size | 18px | - |
—van-action-bar-icon-font-size | var(—van-font-size-xs) | - |
—van-action-bar-icon-active-color | var(—van-active-color) | - |
—van-action-bar-icon-text-color | var(—van-gray-7) | - |
—van-action-bar-icon-background-color | var(—van-background-color-light) | - |
—van-action-bar-button-height | 40px | - |
—van-action-bar-button-warning-color | var(—van-gradient-orange) | - |
—van-action-bar-button-danger-color | var(—van-gradient-red) | - |