Skip to content

Latest commit

 

History

History
 
 

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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)

代码演示

API

ActionBar Props

属性 说明 类型 默认值 备注
actions 按钮组 Array<ActionOptions> - -

ActionOptions Props

属性 说明 类型 默认值
text 文案 String -
disabled 禁用 Boolean false
onClick 点击回调 Function(action: ActionOptions) -
type 2.5.0+ 类型 String disabledtrue时为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

ActionBar Slots

default

左侧文案内容

ActionBar Events

@click(event, action)

按钮点击事件

属性 说明 类型
action actions列表中与被点击按钮对应的对象 Object: ActionOptions