Skip to content

Button 按钮

继承van-button所有属性

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

按钮类型

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

朴素按钮

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

细边框

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

禁用状态

通过 disabled 属性将按钮设置为禁用状态,按钮的颜色变为灰色,无法点击。

加载状态

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

按钮形状

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

图标按钮

通过 icon 属性设置按钮图标,支持 Icon 组件里的所有图标,也可以传入图标 URL。

按钮尺寸

支持 large、normal、small、mini 四种尺寸,默认为 normal。

自定义颜色

通过 color 属性可以自定义按钮的颜色。

API

属性

参数说明类型默认值
type按钮类型,可选值为 default primary success warning dangerstringdefault
size按钮大小,可选值为 large normal small ministringnormal
text按钮文字string-
color按钮颜色,支持颜色名称、十六进制颜色码、RGB 色值、渐变色string-
icon左侧图标,可以是 Icon 组件名称或图片链接string-
icon-prefix图标类名前缀,等价于 Icon 组件的 prefix 属性stringg-icon
icon-position图标位置,可选值为 left rightstringleft
tag自定义标签类型stringbutton
native-type原生 type 属性stringbutton
block是否为块级元素booleanfalse
plain是否为朴素按钮booleanfalse
square是否为方形按钮booleanfalse
round是否为圆形按钮booleanfalse
disabled是否禁用按钮booleanfalse
hairline是否显示 0.5px 边框booleanfalse
loading是否显示为加载状态booleanfalse
loading-type加载图标类型,可选值为 spinner circularstringcircular
loading-text加载状态下显示的文字string-
loading-size加载图标大小string20px
url点击后跳转的链接地址string-
to点击后跳转的目标路由对象,同 vue-router 的 to 属性string-
replace是否在跳转时替换当前页面历史记录booleanfalse

事件

事件名说明参数
click点击按钮时触发-
touchstart触摸开始时触发-

插槽

名称说明
default按钮文字
icon自定义图标
loading自定义加载指示器