Vant Button button

May 07, 2021 Vant

Introduced

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

Vue.use(Button);

Code demo

The type of button

Support for default, primaryy, info, warning, danger five types, the default is 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>

Simple button

The button is set to a simple button with the plain button's text as the button color and the background as white.

<van-button plain type="primary">朴素按钮</van-button>
<van-button plain type="info">朴素按钮</van-button>

Thin border

Setting the hairline property opens the 0.5px border, based on a pseudo-class implementation

<van-button plain hairline type="primary">细边框按钮</van-button>
<van-button plain hairline type="info">细边框按钮</van-button>

The state is disabled

The button is disabled by the disabled property, and the button is not clickable in the disabled state

<van-button disabled type="primary">禁用状态</van-button>
<van-button disabled type="info">禁用状态</van-button>

The load status

By setting the button to load by the loading property, the button text is hidden by default in the load state, and the text in the loading state can be set by the loading-text setting

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

Button shape

Set the square button with square and the circular button with theround

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

Icon button

Set the button icon with icon properties, support all icons in the Icon component, or pass in the 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>

Button size

Support for large, normal, small, mini four sizes, the default is 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>

Block-level elements

Buttons are in-row block-level elements by default, and the block property allows you to set the element type of a button to a block-level element

<van-button type="primary" block>块级元素</van-button>

Page navigation

URL jumps can be made through url properties, or routing jumps can be made through to properties

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

Custom colors

The color of the button can be customized with the color of the color property

<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

Parameters	Description	Type	The default
type	Type, optional value `primary` `info` `warning` `danger`	string	`default`
size	Size, optional value is `large` `small` `mini`	string	`normal`
text	Button text	string	-
color `v2.1.8`	Button color to support incoming `linear-gradient` colors	string	-
icon	The icon name or picture link on the left	string	-
tag	HTML tags	string	`button`
native-type	Native button label type property	string	-
block	Whether it is a block-level element	boolean	`false`
plain	whether it is a simple button	boolean	`false`
square	Whether it is a square button	boolean	`false`
round	Whether it is a circular button	boolean	`false`
disabled	Whether to disable the button	boolean	`false`
hairline	Whether to use the 0.5px border	boolean	`false`
loading	Whether to show up as a load state	boolean	`false`
loading-text	Load the status prompt text	string	-
loading-type	Load icon type, optional value `spinner`	string	`circular`
loading-size	Load icon size	string	`20px`
Url	Click on the link address that jumps	string	-
to	Click to jump the target routing object, with the to property of vue-router	string \| object	-
replace	Whether to replace the current page history when jumping	boolean	`false`

Events

The name of the event	Description	Callback parameters
Click	Click the button and the button status is not triggered when loaded or disabled	event: Event
touchstart	Triggered when you start touching the button	event: TouchEvent

Here's a simple example:

<!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" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css" rel="external nofollow" target="_blank"  />
  <!-- 引入组件 -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js" rel="external nofollow" ></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>禁用状态</p>
      <van-button disabled type="primary">禁用状态</van-button>
      <van-button disabled type="info">禁用状态</van-button>
    </div>
    <div>
      <p>加载状态</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>