| title | ActionBar 操作栏 |
|---|---|
| preview | https://didi.github.io/mand-mobile/examples/#/action-bar |
汇集若干文案或操作按钮的吸底边栏,可用于展示表单信息与提交按钮
import { ActionBar } from 'mand-mobile'
Vue.component(ActionBar.name, ActionBar)默认使用position: fixed固定在页面底部,为避免遮挡内容区底部预留不小于100px的空白(iPhone还需额外增加constant(safe-area-inset-bottom))
| 属性 | 说明 | 类型 | 默认值 | 备注 |
|---|---|---|---|---|
| actions | 按钮组 | Array<ActionOptions> | - | - |
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| text | 文案 | String | - |
| disabled | 禁用 | Boolean | false |
| onClick | 点击回调 | Function(action: ActionOptions) | - |
| type 2.5.0+ | 类型 | String | disabled为true时为disabled,否则为primary |
| plain 2.5.0+ | 朴素 | Boolean | 最后一个按钮为false,其它为true |
| round 2.5.0+ | 圆角 | Boolean | false |
| icon 2.5.0+ | 按钮图标 | String | - |
| iconSvg 2.5.0+ | 按钮svg图标 | Boolean | false |
| inactive 2.5.0+ | 未激活 | Boolean | false |
| loading 2.5.0+ | 加载中状态 | Boolean | false |
左侧文案内容
按钮点击事件
| 属性 | 说明 | 类型 |
|---|---|---|
| action | actions列表中与被点击按钮对应的对象 | Object: ActionOptions |