Appearance
Button 按钮
移动端按钮组件,支持类型、尺寸、加载、禁用、块级、圆角、圆形和朴素样式。
示例
基础用法
使用 type 设置按钮外观风格,可选值为 default、primary、success、error、noble。
朴素按钮
使用 plain 设置朴素按钮,颜色更浅,适合次要操作。
加载与禁用
使用 loading 展示加载状态,使用 disabled 禁用点击;加载状态下按钮会自动禁用。
API
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
type | 'default' | 'primary' | 'error' | 'success' | 'noble' | 'default' | 按钮外观风格 |
size | 'normal' | 'small' | 'large' | 'normal' | 按钮尺寸 |
width | number | string | 'auto' | 按钮宽度 |
height | number | string | 'auto' | 按钮高度 |
round | boolean | false | 是否为圆角按钮 |
circle | boolean | false | 是否为圆形按钮 |
loading | boolean | false | 是否处于加载状态 |
disabled | boolean | false | 是否禁用 |
text | boolean | false | 是否为文字按钮 |
block | boolean | false | 是否为块级按钮 |
plain | boolean | false | 是否为朴素按钮 |
nativeType | 'button' | 'submit' | 'reset' | 'button' | 原生 button 的 type 属性 |
Events
| 事件名 | 参数 | 说明 |
|---|---|---|
click | MouseEvent | 点击按钮时触发。disabled 或 loading 为 true 时按钮会被禁用 |
Slots
| 插槽名 | 说明 |
|---|---|
default | 按钮内容 |
icon | 按钮图标区域。loading 为 true 时默认显示 MtLoading |
注意事项
loading状态下按钮会被禁用,并展示默认加载图标。circle、round、block等样式状态可以组合使用,但应避免造成移动端触控区域过小。width、height支持数字或合法 CSS 值。