Skip to content

Button 按钮

移动端按钮组件,支持类型、尺寸、加载、禁用、块级、圆角、圆形和朴素样式。

示例

基础用法

使用 type 设置按钮外观风格,可选值为 defaultprimarysuccesserrornoble

朴素按钮

使用 plain 设置朴素按钮,颜色更浅,适合次要操作。

加载与禁用

使用 loading 展示加载状态,使用 disabled 禁用点击;加载状态下按钮会自动禁用。

API

Props

参数类型默认值说明
type'default' | 'primary' | 'error' | 'success' | 'noble''default'按钮外观风格
size'normal' | 'small' | 'large''normal'按钮尺寸
widthnumber | string'auto'按钮宽度
heightnumber | string'auto'按钮高度
roundbooleanfalse是否为圆角按钮
circlebooleanfalse是否为圆形按钮
loadingbooleanfalse是否处于加载状态
disabledbooleanfalse是否禁用
textbooleanfalse是否为文字按钮
blockbooleanfalse是否为块级按钮
plainbooleanfalse是否为朴素按钮
nativeType'button' | 'submit' | 'reset''button'原生 button 的 type 属性

Events

事件名参数说明
clickMouseEvent点击按钮时触发。disabledloadingtrue 时按钮会被禁用

Slots

插槽名说明
default按钮内容
icon按钮图标区域。loadingtrue 时默认显示 MtLoading

注意事项

  1. loading 状态下按钮会被禁用,并展示默认加载图标。
  2. circleroundblock 等样式状态可以组合使用,但应避免造成移动端触控区域过小。
  3. widthheight 支持数字或合法 CSS 值。