Skip to content

Button 按钮

最最最最常见的按钮

基础用法

  • 使用 type指定按钮的颜色基调。
  • 使用 variant指定按钮的表现形式。
  • 使用 status 控制按钮的外观。在button中,该属性控制是否是圆角按钮, 是否是圆形按钮

按钮祈祷中...

  • 使用 disabled 指定按钮是否被禁用。
  • 使用 loading指定按钮是否处于加载中。

    TIP

    disabledloading 都代表着按钮不允许, 但是loading会清除按钮的前后缀图标,并附加上loading图标

图标按钮

  • 使用prefix-icon 指定按钮的前缀图标。
  • 使用suffix-icon 指定按钮的后缀图标。

图标可以赋予按钮更多含义。单独设置icon,可以创造一个纯图标按钮。

不同的尺寸

使用 size 指定按钮的大小。

不同的size只控制按钮的最大高度, 三种尺寸对应最大高度为: 24px, 32px, 40px。

当button内容超过button宽度时, 默认会换行而撑开button.

按钮组

急急急急急.......

Button API

Button Props

属性名说明类型默认值
type按钮的类型'primary' | 'success' | 'info' | 'warning' | 'danger' | 'cyan'default
nativeType按钮的原生类型'buton' | 'sumbit' | 'reset'button
size按钮的大小 'small' | 'large'normal
variant按钮的表现形式'ghost' | 'fantasy' | 'empty'---
disabled是否禁用按钮Booleanfalse
loading是否加载中按钮Booleanfalse
prefixIcon按钮的前缀图标String---
suffixIcon按钮的后缀图标String---

Button Events

事件名说明类型
click按钮点击事件(evt: MouseEvent) => void

Button Slots

名称说明
default默认槽

源代码

组件

贡献者

Released under the MIT License.