Vant3 ActionBar 動(dòng)作欄

介紹

用于為頁面相關(guān)操作提供便捷交互。

實(shí)例演示

引入

通過以下方式來全局注冊組件，更多注冊方式請參考組件注冊。

import { createApp } from 'vue';
import { ActionBar, ActionBarIcon, ActionBarButton } from 'vant';

const app = createApp();
app.use(ActionBar);
app.use(ActionBarIcon);
app.use(ActionBarButton);

代碼演示

基礎(chǔ)用法

<van-action-bar>
  <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>

import { Toast } from 'vant';

export default {
  setup() {
    const onClickIcon = () => Toast('點(diǎn)擊圖標(biāo)');
    const onClickButton = () => Toast('點(diǎn)擊按鈕');
    return {
      onClickIcon,
      onClickButton,
    };
  },
};

徽標(biāo)提示

在 ActionBarIcon 組件上設(shè)置 dot 屬性后，會(huì)在圖標(biāo)右上角展示一個(gè)小紅點(diǎn)；設(shè)置 badge 屬性后，會(huì)在圖標(biāo)右上角展示相應(yīng)的徽標(biāo)。

<van-action-bar>
  <van-action-bar-icon icon="chat-o" text="客服" dot />
  <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-button type="danger" text="立即購買" />
</van-action-bar>

自定義圖標(biāo)顏色

通過 ActionBarIcon 的 color 屬性可以自定義圖標(biāo)的顏色。

<van-action-bar>
  <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
  <van-action-bar-icon icon="cart-o" text="購物車" />
  <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
  <van-action-bar-button type="warning" text="加入購物車" />
  <van-action-bar-button type="danger" text="立即購買" />
</van-action-bar>

自定義按鈕顏色

通過 ActionBarButton 的 color 屬性可以自定義按鈕的顏色，支持傳入 linear-gradient 漸變色。

<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>

API

ActionBar Props

ActionBarIcon Props

ActionBarButton Props

ActionBarIcon Slots

ActionBarButton Slots

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請參考 ConfigProvider 組件。