Button 按鈕 - Vant 4
Button 按鈕
🎯 介紹
按鈕是使用者介面中最常見的互動元素！無論是提交表單、觸發操作，還是引導使用者進行下一步，按鈕都是不可或缺的好幫手。Vant 的按鈕元件為你提供了豐富的樣式和功能，讓你的應用更加美觀和易用。
📦 引入
透過以下方式來全域註冊元件，更多註冊方式請參考元件註冊。
import { createApp } from 'vue';
import { Button } from 'vant';
const app = createApp();
app.use(Button);🚀 程式碼演示
按鈕類型
Vant 為你準備了五種不同風格的按鈕類型：default（預設）、primary（主要）、success（成功）、warning（警告）、danger（危險）。每種類型都有獨特的顏色和含義，幫你更好地傳達操作意圖。
<van-button type="default">預設按鈕</van-button>
<van-button type="primary">主要按鈕</van-button>
<van-button type="success">成功按鈕</van-button>
<van-button type="warning">警告按鈕</van-button>
<van-button type="danger">危險按鈕</van-button>樸素按鈕
想要一個更加簡潔的按鈕樣式？試試樸素按鈕吧！透過 plain 屬性，按鈕會變成白色背景，文字保持原有顏色，給人一種清爽的感覺。
<van-button plain type="primary">樸素按鈕</van-button>
<van-button plain type="success">樸素按鈕</van-button>細邊框
追求極致的視覺效果？設定 hairline 屬性可以展示 0.5px 的超細邊框，讓你的按鈕看起來更加精緻！
<van-button plain hairline type="primary">細邊框按鈕</van-button>
<van-button plain hairline type="success">細邊框按鈕</van-button>禁用狀態
有時候我們需要暫時「凍結」某個按鈕，比如表單驗證未通過時。透過 disabled 屬性，按鈕會變成灰色且無法點擊，清楚地告訴使用者目前不可操作。
<van-button disabled type="primary">禁用狀態</van-button>
<van-button disabled type="success">禁用狀態</van-button>載入狀態
透過 loading 屬性設定按鈕為載入狀態，載入狀態下預設會隱藏按鈕文字，可以透過 loading-text 設定載入狀態下的文字。
按鈕形狀
透過 square 設定方形按鈕，透過 round 設定圓形按鈕。
圖示按鈕
透過 icon 屬性設定按鈕圖示，支援 Icon 元件裡的所有圖示，也可以傳入圖示 URL。
按鈕尺寸
支援 large、normal、small、mini 四種尺寸，預設為 normal。
塊級元素
按鈕在預設情況下為行內塊級元素，透過 block 屬性可以將按鈕的元素類型設定為塊級元素。
頁面導航
可以透過 url 屬性進行 URL 跳轉，或透過 to 屬性進行路由跳轉。
自訂顏色
透過 color 屬性可以自訂按鈕的顏色。
動畫按鈕
搭配 Button 和 Swipe 元件，可以實現垂直滾動的動畫按鈕效果。
API
Props
| 參數 | 說明 | 類型 | 預設值 |
|---|---|---|---|
| type | 類型，可選值為 primary``success``warning``danger | string | default |
| size | 尺寸，可選值為 large``small``mini | string | normal |
| text | 按鈕文字 | string | - |
| color | 按鈕顏色，支援傳入 linear-gradient 漸變色 | string | - |
| icon | 左側圖示名稱或圖片連結，等同於 Icon 元件的 name 屬性 | string | - |
| icon-prefix | 圖示類名前綴，等同於 Icon 元件的 class-prefix 屬性 | string | van-icon |
| icon-position | 圖示展示位置，可選值為 right | string | left | | tag | 按鈕根節點的 HTML 標籤 | string | button | | native-type | 原生 button 標籤的 type 屬性 | string | button | | block | 是否為塊級元素 | boolean | false | | plain | 是否為樸素按鈕 | boolean | false | | square | 是否為方形按鈕 | boolean | false | | round | 是否為圓形按鈕 | boolean | false | | disabled | 是否禁用按鈕 | boolean | false | | hairline | 是否使用 0.5px 邊框 | boolean | false | | loading | 是否顯示為載入狀態 | boolean | false | | loading-text | 載入狀態提示文字 | string | - | | loading-type | 載入圖示類型，可選值為 spinner | string | circular |
| loading-size | 載入圖示大小，預設單位為 px | number | string | 20px | | url | 點擊後跳轉的連結地址 | string | - | | to | 點擊後跳轉的目標路由物件，等同於 Vue Router 的 to 屬性 | string | object | - |
| replace | 是否在跳轉時替換目前頁面歷史 | boolean | false |
Events
| 事件名 | 說明 | 回調參數 |
|---|---|---|
| click | 點擊按鈕，且按鈕狀態不為載入或禁用時觸發 | event: MouseEvent |
| touchstart | 開始觸摸按鈕時觸發 | event: TouchEvent |
Slots
| 名稱 | 說明 |
|---|---|
| default | 按鈕內容 |
| icon | 自訂圖示 |
| loading | 自訂載入圖示 |
類型定義
元件匯出以下類型定義：
importtype { ButtonType, ButtonSize, ButtonProps, ButtonNativeType, ButtonIconPosition, } from'vant';主題定制
樣式變數
元件提供了下列 CSS 變數，可用於自訂樣式，使用方法請參考 ConfigProvider 元件。
| 名稱 | 預設值 | 描述 |
|---|---|---|
| --van-button-mini-height | 24px | - |
| --van-button-mini-padding | 0 var(--van-padding-base) | - |
| --van-button-mini-font-size | var(--van-font-size-xs) | - |
| --van-button-small-height | 32px | - |
| --van-button-small-padding | 0 var(--van-padding-xs) | - |
| --van-button-small-font-size | var(--van-font-size-sm) | - |
| --van-button-normal-font-size | var(--van-font-size-md) | - |
| --van-button-normal-padding | 0 15px | - |
| --van-button-large-height | 50px | - |
| --van-button-default-height | 44px | - |
| --van-button-default-line-height | 1.2 | - |
| --van-button-default-font-size | var(--van-font-size-lg) | - |
| --van-button-default-color | var(--van-text-color) | - |
| --van-button-default-background | var(--van-background-2) | - |
| --van-button-default-border-color | var(--van-gray-4) | - |
| --van-button-primary-color | var(--van-white) | - |
| --van-button-primary-background | var(--van-primary-color) | - |
| --van-button-primary-border-color | var(--van-primary-color) | - |
| --van-button-success-color | var(--van-white) | - |
| --van-button-success-background | var(--van-success-color) | - |
| --van-button-success-border-color | var(--van-success-color) | - |
| --van-button-danger-color | var(--van-white) | - |
| --van-button-danger-background | var(--van-danger-color) | - |
| --van-button-danger-border-color | var(--van-danger-color) | - |
| --van-button-warning-color | var(--van-white) | - |
| --van-button-warning-background | var(--van-orange) | - |
| --van-button-warning-border-color | var(--van-orange) | - |
| --van-button-border-width | var(--van-border-width) | - |
| --van-button-radius | var(--van-radius-md) | - |
| --van-button-round-radius | var(--van-radius-max) | - |
| --van-button-plain-background | var(--van-white) | - |
| --van-button-disabled-opacity | var(--van-disabled-opacity) | - |
| --van-button-icon-size | 1.2em | - |
| --van-button-loading-icon-size | 20px | - |
📝 總結
Button 按鈕元件是使用者介面中的核心互動元素！🎯 它不僅僅是一個簡單的點擊區域，更是連接使用者意圖與應用功能的重要橋樑。從基礎的文字按鈕到炫酷的動畫效果，Vant 的按鈕元件為你提供了無限的可能性。
🎯 核心特性：
- 🎨 豐富樣式：五種類型、多種尺寸、樸素風格任你選擇
- 🎭 狀態管理：載入、禁用、激活狀態一應俱全
- 🎪 形狀變化：方形、圓形、塊級元素靈活切換
- 🎨 自訂顏色：支援漸變色，打造獨特視覺效果
- 🚀 導航功能：URL跳轉、路由導航輕鬆實現
- ⚡ 動畫效果：配合其他元件創造驚艷的互動體驗
從簡單的確認操作到複雜的表單提交，從頁面導航到動畫展示，Button 讓你的應用互動更加出色！