技術標籤：vant【移動端最好用的工具】htmljavascriptvue.js

Button按鈕·介紹

文章從vant官網搜錄-僅用於個人學習而使用！

按鈕用於觸發一個操作，如提交表單。

引入

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

Vue.use(Button);

程式碼演示

1.按鈕型別

按鈕支援 default、primary、info、warning、danger五種型別，預設為 default。
效果圖：

程式碼：

<van-button type="primary"
 
>主要按鈕</van-button>
<van-button type="info">資訊按鈕</van-button>
<van-button type="default">預設按鈕</van-button>
<van-button type="warning">警告按鈕</van-button>
<van-button type="danger">危險按鈕</van-button>

2.樸素按鈕

效果圖：

通過plain屬性將按鈕設定為樸素按鈕，樸素按鈕的文字為按鈕顏色，背景為白色。
程式碼：

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

3.細邊框

效果圖：

設定 hairline 屬性可以展示 0.5px 的細邊框。
程式碼：

<van-button plain hairline type="primary">細邊框按鈕<
 
/van-button>
<van-button plain hairline type="info">細邊框按鈕</van-button>

4.禁用狀態

通過 disabled 屬性來禁用按鈕，禁用狀態下按鈕不可點選。
效果圖：

程式碼：

<van-button disabled type="primary">禁用狀態</van-button>
<van-button disabled type="info">禁用狀態</van-button>

5.載入狀態

效果圖：

通過loading屬性設定按鈕為載入狀態，載入狀態下預設會隱藏按鈕文字，可以通過loading-text 設定載入狀態下的文字。
程式碼：

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

6.按鈕形狀

效果圖：

通過 square設定方形按鈕，通過round設定圓形按鈕。
程式碼：

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

7.圖示按鈕

效果圖：

通過 icon屬性設定按鈕圖示，支援 Icon元件裡的所有圖示，也可以傳入圖示 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="info">

按鈕

</van-button>

按鈕尺寸
效果圖：

支援 large、normal、small、mini 四種尺寸，預設為 normal。
程式碼：

<van-button type="primary" size="large">大號按鈕</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>

8.塊級元素

效果圖：

按鈕在預設情況下為行內塊級元素，通過 block 屬性可以將按鈕的元素型別設定為塊級元素。
程式碼：

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

9.頁面導航

效果圖：

可以通過 url 屬性進行 URL 跳轉，或通過 to屬性進行路由跳轉。
程式碼：

<van-button type="primary" url="/vant/mobile.html">URL 跳轉</van-button>
<van-button type="primary" to="index">路由跳轉</van-button>

10.自定義顏色

效果圖：

通過 color 屬性可以自定義按鈕的顏色。
程式碼：

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

11.漸變色按鈕

</van-button>

12.API

Props

13.Events

14.Slots

15.樣式變數

元件提供了下列 Less 變數，可用於自定義樣式，使用方法請參考主題定製。