Button 按钮
按钮组件,可配置多种不同的按钮样式
引入
import { Button } from 'mand-mobile-next'
Vue.createApp().component(Button.name, Button)
代码演示
API
Button Props
| 属性 | 说明 | 类型 | 默认值 | 备注 |
|---|---|---|---|---|
| type | 样式 | String | default | default, primary, warning, disabled, link |
| native-type | 类型 | String | button | - |
| size | 尺寸 | String | large | large/small,小尺寸可直接用属性small简写 |
| plain | 朴素 | Boolean | false | - |
| round | 圆角 | Boolean | false | - |
| inline | 行内 | Boolean | false | - |
| inactive | 未激活 | Boolean | false | inactive设为true和disabled类型的按钮都无法点击,前者一般用于表单校验无效等主观因素,后者用于无权限或无库存等客观因素 |
| icon | 图标 | String | - | 可选值请参考组件Icon |
| icon-svg | 使用svg图标 | Boolean | false | - |
| loading | 加载中状态 | Boolean/String | false | roller(等同于true),spinner,ring,carousel |
| loading-color | 加载中图标颜色 | String | false | 参考ActivityIndicator |
Button Slots
default
按钮内容
Button Events
@click(event)
按钮点击事件
Mand Mobile