ActionBar 動作欄 - Vant 4
ActionBar 動作欄
🎯 介紹
動作欄是移動端應用的得力助手！它通常固定在頁面底部，為用戶提供快捷的操作入口。無論是購物車、收藏、分享，還是立即購買，動作欄都能讓用戶輕鬆完成各種操作，大大提升用戶體驗。
📦 引入
通過以下方式來全局註冊組件，更多註冊方式請參考組件註冊。
import { createApp } from 'vue';
import { ActionBar, ActionBarIcon, ActionBarButton } from 'vant';
const app = createApp();
app.use(ActionBar);
app.use(ActionBarIcon);
app.use(ActionBarButton);🚀 代碼演示
基礎用法
最簡單的動作欄包含圖標和按鈕。圖標通常用於次要操作（如收藏、分享），按鈕用於主要操作（如加入購物車、立即購買）。
<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-button type="warning" text="加入購物車" @click="onClickButton" />
<van-action-bar-button type="danger" text="立即購買" @click="onClickButton" />
</van-action-bar>import { showToast } from 'vant';
export default {
setup() {
const onClickIcon = () => showToast('點擊圖標');
const onClickButton = () => showToast('點擊按鈕');
return {
onClickIcon,
onClickButton,
};
},
};徽標提示
想要吸引用戶注意？在 ActionBarIcon 組件上設置 dot 屬性會在圖標右上角展示一個醒目的小紅點；設置 badge 屬性則可以顯示具體的數字或文字，比如購物車商品數量。
<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>自定義圖標顏色
通過 ActionBarIcon 的 color 屬性可以自定義圖標的顏色，讓你的動作欄更符合品牌色彩。
<van-action-bar>
<van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
<van-action-bar-icon icon="cart-o" text="購物車" />
<van-action-bar-button type="warning" text="加入購物車" />
<van-action-bar-button type="danger" text="立即購買" />
</van-action-bar>自定義按鈕顏色
通過 ActionBarButton 的 color 屬性可以自定義按鈕的顏色，甚至支持傳入 linear-gradient 漸變色，讓你的按鈕更加炫酷！
API
ActionBar Props
| 參數 | 說明 | 類型 | 默認值 |
|---|---|---|---|
| safe-area-inset-bottom | 是否開啟底部安全區適配 | boolean | true |
| placeholder | 是否在標籤位置生成一個等高的佔位元素 | boolean | false |
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 | 自定義徽標的屬性，傳入的對象會被透傳給 Badge 組件的 props | BadgeProps | - |
| url | 點擊後跳轉的鏈接地址 | string | - | | to | 點擊後跳轉的目標路由對象，等同於 Vue Router 的 to 屬性 | string | object | - |
| replace | 是否在跳轉時替換當前頁面歷史 | boolean | false |
ActionBarButton Props
| 參數 | 說明 | 類型 | 默認值 |
|---|---|---|---|
| text | 按鈕文字 | string | - |
| type | 按鈕類型，可選值為 default``primary``success``warning``danger | string | default |
| color | 按鈕顏色，支持傳入 linear-gradient 漸變色 | string | - |
| icon | 左側圖標名稱或圖片鏈接，等同於 Icon 組件的 name 屬性 | string | - |
| disabled | 是否禁用按鈕 | boolean | false | | loading | 是否顯示為加載狀態 | boolean | false | | url | 點擊後跳轉的鏈接地址 | string | - | | to | 點擊後跳轉的目標路由對象，等同於 Vue Router 的 to 屬性 | string | object | - |
| replace | 是否在跳轉時替換當前頁面歷史 | boolean | false |
ActionBarIcon Slots
| 名稱 | 說明 |
|---|---|
| default | 文本內容 |
| icon | 自定義圖標 |
ActionBarButton Slots
| 名稱 | 說明 |
|---|---|
| default | 按鈕顯示內容 |
類型定義
組件導出以下類型定義：
importtype { ActionBarProps, ActionBarIconProps, ActionBarButtonProps, } from'vant';主題定制
樣式變量
組件提供了下列 CSS 變量，可用於自定義樣式，使用方法請參考 ConfigProvider 組件。
| 名稱 | 默認值 | 描述 |
|---|---|---|
| --van-action-bar-background | var(--van-background-2) | - |
| --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-text-color) | - |
| --van-action-bar-icon-background | var(--van-background-2) | - |
| --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) | - |
🎉 總結
ActionBar 動作欄是移動端應用的黃金搭檔！它不僅能提供便捷的操作入口，還能通過徽標提示、自定義顏色等功能，讓你的應用更加生動有趣。無論是電商購物、社交分享，還是其他業務場景，ActionBar 都能幫你打造出色的用戶體驗。
📚 相關內容
想要了解更多？這些內容可能對你有幫助：
- 🚀 快速開始 - 從零開始，快速上手 Vant
- 🎨 主題定制 - 打造專屬於你的視覺風格
- 📱 移動端適配 - 讓你的應用在各種設備上完美呈現
- 🔘 Button 按鈕 - 了解按鈕組件的基礎用法
- 🏷️ Badge 徽標 - 學習徽標組件的使用方法
- 🎨 Icon 圖標 - 探索圖標組件的豐富功能
- 📋 最佳實踐 - 學習開發中的最佳實踐
- 🔍 常見問題 - 快速解決開發中的疑問