Vant3 Button按鈕

介紹

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

實(shí)例演示

引入

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

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="primary">樸素按鈕</van-button>

細(xì)邊框

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

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

禁用狀態(tài)

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

<van-button disabled type="primary">禁用狀態(tài)</van-button>
<van-button disabled type="primary">禁用狀態(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="primary" loading-text="加載中..." />

按鈕形狀

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

<van-button square type="primary">方形按鈕</van-button>
<van-button round type="primary">圓形按鈕</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://img.yzcdn.cn/vant/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>

塊級元素

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

<van-button type="primary" block>塊級元素</van-button>

頁面導(dǎo)航

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

<van-button type="primary" url="/vant/mobile.html">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

主題定制

樣式變量

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