Vant3 中文入门教程 Vant3 Button按钮

2024-02-25 开发教程 Vant3 中文入门教程 匿名 1

介绍

按钮用于触发一个操作,如提交表单。

实例演示

引入

通过以下方式来全局注册组件,更多注册方式请参考组件注册。

import { createApp } from 'vue';
import { Button } from 'vant';
const app = createApp();
app.use(Button);

代码演示

按钮类型

按钮支持 default、primary、success、warning、danger 五种类型,默认为 default。

<van-button type="primary">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

朴素按钮

通过 plain 属性将按钮设置为朴素按钮,朴素按钮的文字为按钮颜色,背景为白色。

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

细边框

设置 hairline 属性可以展示 0.5px 的细边框。

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

禁用状态

通过 disabled 属性来禁用按钮,禁用状态下按钮不可点击。

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

加载状态

通过 loading 属性设置按钮为加载状态,加载状态下默认会隐藏按钮文字,可以通过 loading-text 设置加载状态下的文字。

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

按钮形状

通过 square 设置方形按钮,通过 round 设置圆形按钮。

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

图标按钮

通过 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="primary">
按钮
</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>

块级元素

按钮在默认情况下为行内块级元素,通过 block 属性可以将按钮的元素类型设置为块级元素。

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

页面导航

可以通过 url 属性进行 URL 跳转,或通过 to 属性进行路由跳转。

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

参数说明类型默认值
type

类型,可选值为 primarysuccesswarningdanger

string

default

size

尺寸,可选值为 largesmallmini

string

normal

text按钮文字

string

-
color按钮颜色,支持传入 linear-gradient渐变色

string

-
icon左侧图标名称或图片链接

string

-
icon-prefix

图标类名前缀,同 Icon 组件的 class-prefix 属性

string

van-icon

icon-position

图标展示位置,可选值为 right

string

left

tag按钮根节点的 HTML 标签

string

button

native-type原生 button 标签的 type 属性

string

button

block是否为块级元素

boolean

false

plain是否为朴素按钮

boolean

false

square是否为方形按钮

boolean

false

round是否为圆形按钮

boolean

false

disabled是否禁用按钮

boolean

false

hairline是否使用 0.5px 边框

boolean

false

loading是否显示为加载状态

boolean

false

loading-text加载状态提示文字

string

-
loading-type

加载图标类型,可选值为 spinner

string

circular

loading-size加载图标大小

string

20px

url点击后跳转的链接地址

string

-
to

点击后跳转的目标路由对象,同 vue-router 的 to 属性

string | object

-
replace是否在跳转时替换当前页面历史

boolean

false

Events

事件名说明回调参数
click点击按钮,且按钮状态不为加载或禁用时触发

event: MouseEvent

touchstart开始触摸按钮时触发

event: TouchEvent

Slots

名称说明
default按钮内容

icon v3.0.18

自定义图标
loading自定义加载图标

主题定制

样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。

名称默认值描述
--van-button-mini-height

24px

-
--van-button-mini-padding

0 var(--van-padding-base)

-
--van-button-mini-font-size

var(--van-font-size-xs)

-
--van-button-small-height

32px

-
--van-button-small-padding

0 var(--van-padding-xs)

-
--van-button-small-font-size

var(--van-font-size-sm)

-
--van-button-normal-font-size

var(--van-font-size-md)

-
--van-button-normal-padding

0 15px

-
--van-button-large-height

50px

-
--van-button-default-height

44px

-
--van-button-default-line-height

1.2

-
--van-button-default-font-size

var(--van-font-size-lg)

-
--van-button-default-color

var(--van-text-color)

-
--van-button-default-background-color

var(--van-white)

-
--van-button-default-border-color

var(--van-border-color)

-
--van-button-primary-color

var(--van-white)

-
--van-button-primary-background-color

var(--van-primary-color)

-
--van-button-primary-border-color

var(--van-primary-color)

-
--van-button-success-color

var(--van-white)

-
--van-button-success-background-color

var(--van-success-color)

-
--van-button-success-border-color

var(--van-success-color)

-
--van-button-danger-color

var(--van-white)

-
--van-button-danger-background-color

var(--van-danger-color)

-
--van-button-danger-border-color

var(--van-danger-color)

-
--van-button-warning-color

var(--van-white)

-
--van-button-warning-background-color

var(--van-orange)

-
--van-button-warning-border-color

var(--van-orange)

-
--van-button-border-width

var(--van-border-width-base)

-
--van-button-border-radius

var(--van-border-radius-sm)

-
--van-button-round-border-radius

var(--van-border-radius-max)

-
--van-button-plain-background-color

var(--van-white)

-
--van-button-disabled-opacity

var(--van-disabled-opacity)

-
--van-button-icon-size

1.2em

-
--van-button-loading-icon-size

20px

-