閱讀(24.3k) 書簽贊(1) 我要糾錯

Vant Button 按鈕

2022-05-31 11:56 更新

引入

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

Vue.use(Button);

代碼演示

按鈕類型

支持default、primary、info、warning、danger五種類型，默認為default

<van-button type="default">默認按鈕</van-button>
<van-button type="primary">主要按鈕</van-button>
<van-button type="info">信息按鈕</van-button>
<van-button type="warning">警告按鈕</van-button>
<van-button type="danger">危險按鈕</van-button>

樸素按鈕

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

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

細邊框

設(shè)置hairline屬性可以開啟 0.5px 邊框，基于偽類實現(xiàn)

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

禁用狀態(tài)

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

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

加載狀態(tài)

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

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

按鈕形狀

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

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

圖標按鈕

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

<van-button icon="star-o" type="primary" />
<van-button icon="star-o" type="primary">按鈕</van-button>
<van-button icon="https://img.yzcdn.cn/vant/logo.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>

塊級元素

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

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

頁面導(dǎo)航

可以通過url屬性進行 URL 跳轉(zhuǎn)，或通過to屬性進行路由跳轉(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, #4bb0ff, #6149f6)">漸變色按鈕</van-button>

API

Props

參數(shù)	說明	類型	默認值
type	類型，可選值為 `primary` `info` `warning` `danger`	string	`default`
size	尺寸，可選值為 `large` `small` `mini`	string	`normal`
text	按鈕文字	string	-
color `v2.1.8`	按鈕顏色，支持傳入`linear-gradient`漸變色	string	-
icon	左側(cè) 圖標名稱或圖片鏈接	string	-
tag	HTML 標簽	string	`button`
native-type	原生 button 標簽 type 屬性	string	-
block	是否為塊級元素	boolean	`false`
plain	是否為樸素按鈕	boolean	`false`
square	是否為方形按鈕	boolean	`false`
round	是否為圓形按鈕	boolean	`false`
disabled	是否禁用按鈕	boolean	`false`
hairline	是否使用 0.5px 邊框	boolean	`false`
loading	是否顯示為加載狀態(tài)	boolean	`false`
loading-text	加載狀態(tài)提示文字	string	-
loading-type	加載圖標類型，可選值為`spinner`	string	`circular`
loading-size	加載圖標大小	string	`20px`
url	點擊后跳轉(zhuǎn)的鏈接地址	string	-
to	點擊后跳轉(zhuǎn)的目標路由對象，同 vue-router 的 to 屬性	string \| object	-
replace	是否在跳轉(zhuǎn)時替換當前頁面歷史	boolean	`false`

Events

事件名	說明	回調(diào)參數(shù)
click	點擊按鈕，且按鈕狀態(tài)不為加載或禁用時觸發(fā)	event: Event
touchstart	開始觸摸按鈕時觸發(fā)	event: TouchEvent

以下是一個簡單示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>W3Cschool(w3cschool.cn)</title>
  <!-- 引入樣式 -->
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  />
  <!-- 引入組件 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js" rel="external nofollow" ></script>
  <script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js" rel="external nofollow" ></script>
</head>
<body>
  <div id="app">
    <div>
      <p>按鈕類型</p>
      <van-button type="primary">主要按鈕</van-button>
      <van-button type="info">信息按鈕</van-button>
      <van-button type="default">默認按鈕</van-button>
      <van-button type="danger">危險按鈕</van-button>
      <van-button type="warning">警告按鈕</van-button>
    </div>
    <div>
      <p>樸素按鈕</p>
      <van-button plain type="primary">樸素按鈕</van-button>
      <van-button plain type="info">樸素按鈕</van-button>
    </div>
    <div>
      <p>細邊框</p>
      <van-button plain hairline type="primary">細邊框按鈕</van-button>
      <van-button plain hairline type="info">細邊框按鈕</van-button>
    </div>
    <div>
      <p>禁用狀態(tài)</p>
      <van-button disabled type="primary">禁用狀態(tài)</van-button>
      <van-button disabled type="info">禁用狀態(tài)</van-button>
    </div>
    <div>
      <p>加載狀態(tài)</p>
      <van-button loading type="primary" />
      <van-button loading type="primary" loading-type="spinner" />
      <van-button loading type="info" loading-text="加載中..." />
    </div>
    <div>
      <p>按鈕形狀</p>
      <van-button square type="primary">方形按鈕</van-button>
      <van-button round type="info">圓形按鈕</van-button>
    </div>
  </div>
</body>
<script>
  var app = new Vue({
    el: '#app',
    data: {
    },
    methods: {
    },
    created() {
    },
  })
</script>
</html>

實例演示

以上內(nèi)容是否對您有幫助：

← Vant 國際化

Vant Cell 單元格 →

寫筆記

我要補充