閱讀(25k) 書(shū)簽贊(1) 我要糾錯(cuò)

Vant Button 按鈕

2022-05-31 11:56 更新

引入

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

Vue.use(Button);

代碼演示

按鈕類型

支持default、primary、info、warning、danger五種類型，默認(rèn)為default

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

樸素按鈕

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

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

細(xì)邊框

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

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

禁用狀態(tài)

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

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

加載狀態(tài)

通過(guò)loading屬性設(shè)置按鈕為加載狀態(tài)，加載狀態(tài)下默認(rèn)會(huì)隱藏按鈕文字，可以通過(guò)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="加載中..." />

按鈕形狀

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

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

圖標(biāo)按鈕

通過(guò)icon屬性設(shè)置按鈕圖標(biāo)，支持 Icon 組件里的所有圖標(biāo)，也可以傳入圖標(biāo) 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四種尺寸，默認(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í)元素，通過(guò)block屬性可以將按鈕的元素類型設(shè)置為塊級(jí)元素

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

頁(yè)面導(dǎo)航

可以通過(guò)url屬性進(jìn)行 URL 跳轉(zhuǎn)，或通過(guò)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>

自定義顏色

通過(guò)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ù)	說(shuō)明	類型	默認(rèn)值
type	類型，可選值為 `primary` `info` `warning` `danger`	string	`default`
size	尺寸，可選值為 `large` `small` `mini`	string	`normal`
text	按鈕文字	string	-
color `v2.1.8`	按鈕顏色，支持傳入`linear-gradient`漸變色	string	-
icon	左側(cè) 圖標(biāo)名稱或圖片鏈接	string	-
tag	HTML 標(biāo)簽	string	`button`
native-type	原生 button 標(biāo)簽 type 屬性	string	-
block	是否為塊級(jí)元素	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	加載圖標(biāo)類型，可選值為`spinner`	string	`circular`
loading-size	加載圖標(biāo)大小	string	`20px`
url	點(diǎn)擊后跳轉(zhuǎn)的鏈接地址	string	-
to	點(diǎn)擊后跳轉(zhuǎn)的目標(biāo)路由對(duì)象，同 vue-router 的 to 屬性	string \| object	-
replace	是否在跳轉(zhuǎn)時(shí)替換當(dāng)前頁(yè)面歷史	boolean	`false`

Events

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

以下是一個(gè)簡(jiǎn)單示例：

<!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">默認(rèn)按鈕</van-button>
      <van-button type="danger">危險(xiǎn)按鈕</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>細(xì)邊框</p>
      <van-button plain hairline type="primary">細(xì)邊框按鈕</van-button>
      <van-button plain hairline type="info">細(xì)邊框按鈕</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>

實(shí)例演示

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

← Vant 國(guó)際化

Vant Cell 單元格 →

寫筆記

我要補(bǔ)充