Vant4 Button 按鈕

介紹

按鈕用于觸發(fā)一個(gè)操作，如提交表單。

引入

通過以下方式來全局注冊(cè)組件，更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。

import { createApp } from 'vue';
import { Button } from 'vant';

const app = createApp();
app.use(Button);

代碼演示

按鈕類型

按鈕支持 ?default?、?primary?、?success?、?warning?、?danger? 五種類型，默認(rèn)為 ?default?。

<van-button type="primary">主要按鈕</van-button>
<van-button type="success">成功按鈕</van-button>
<van-button type="default">默認(rèn)按鈕</van-button>
<van-button type="warning">警告按鈕</van-button>
<van-button type="danger">危險(xiǎn)按鈕</van-button>

樸素按鈕

通過 ?plain? 屬性將按鈕設(shè)置為樸素按鈕，樸素按鈕的文字為按鈕顏色，背景為白色。

<van-button plain type="primary">樸素按鈕</van-button>
<van-button plain type="success">樸素按鈕</van-button>

細(xì)邊框

設(shè)置 ?hairline? 屬性可以展示 0.5px 的細(xì)邊框。

<van-button plain hairline type="primary">細(xì)邊框按鈕</van-button>
<van-button plain hairline type="success">細(xì)邊框按鈕</van-button>

禁用狀態(tài)

通過 ?disabled? 屬性來禁用按鈕，禁用狀態(tài)下按鈕不可點(diǎn)擊。

<van-button disabled type="primary">禁用狀態(tài)</van-button>
<van-button disabled type="success">禁用狀態(tài)</van-button>

加載狀態(tài)

通過 ?loading? 屬性設(shè)置按鈕為加載狀態(tài)，加載狀態(tài)下默認(rèn)會(huì)隱藏按鈕文字，可以通過 ?loading-text? 設(shè)置加載狀態(tài)下的文字。

<van-button loading type="primary" />
<van-button loading type="primary" loading-type="spinner" />
<van-button loading type="success" loading-text="加載中..." />

按鈕形狀

通過 ?square? 設(shè)置方形按鈕，通過 ?round? 設(shè)置圓形按鈕。

<van-button square type="primary">方形按鈕</van-button>
<van-button round type="success">圓形按鈕</van-button>

圖標(biāo)按鈕

通過 ?icon? 屬性設(shè)置按鈕圖標(biāo)，支持 Icon 組件里的所有圖標(biāo)，也可以傳入圖標(biāo) URL。

<van-button icon="plus" type="primary" />
<van-button icon="plus" type="primary">按鈕</van-button>
<van-button
  icon="https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png"
  type="primary"
>
  按鈕
</van-button>

按鈕尺寸

支持 ?large?、?normal?、?small?、?mini? 四種尺寸，默認(rèn)為 ?normal?。

<van-button type="primary" size="large">大號(hào)按鈕</van-button>
<van-button type="primary" size="normal">普通按鈕</van-button>
<van-button type="primary" size="small">小型按鈕</van-button>
<van-button type="primary" size="mini">迷你按鈕</van-button>

塊級(jí)元素

按鈕在默認(rèn)情況下為行內(nèi)塊級(jí)元素，通過 ?block? 屬性可以將按鈕的元素類型設(shè)置為塊級(jí)元素。

<van-button type="primary" block>塊級(jí)元素</van-button>

頁面導(dǎo)航

可以通過 ?url? 屬性進(jìn)行 URL 跳轉(zhuǎn)，或通過 ?to? 屬性進(jìn)行路由跳轉(zhuǎn)。

<van-button type="primary" url="https://github.com">URL 跳轉(zhuǎn)</van-button>
<van-button type="primary" to="index">路由跳轉(zhuǎn)</van-button>

自定義顏色

通過 ?color? 屬性可以自定義按鈕的顏色。

<van-button color="#7232dd">單色按鈕</van-button>
<van-button color="#7232dd" plain>單色按鈕</van-button>
<van-button color="linear-gradient(to right, #ff6034, #ee0a24)">
  漸變色按鈕
</van-button>

API

Props

Events

Slots

類型定義

組件導(dǎo)出以下類型定義：

import type {
  ButtonType,
  ButtonSize,
  ButtonProps,
  ButtonNativeType,
  ButtonIconPosition,
} from 'vant';

主題定制

樣式變量

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