ActionBar 操作栏
汇集若干文案或操作按钮的吸底边栏,可用于展示表单信息与提交按钮
引入
import { ActionBar } from 'mand-mobile'
Vue.component(ActionBar.name, ActionBar)
代码演示
通栏多按钮
<template>
<div class="md-example-child md-example-child-action-bar md-example-child-0">
<md-action-bar :actions="data"></md-action-bar>
</div>
</template>
<script>
import {ActionBar, Toast} from 'mand-mobile'
export default {
name: 'action-bar-demo',
components: {
[ActionBar.name]: ActionBar,
},
data() {
return {
data: [
{
text: '操作一',
onClick: this.handleClick,
},
{
text: '操作二',
onClick: this.handleClick,
},
],
}
},
methods: {
handleClick() {
Toast.succeed('Click')
},
},
}
</script>
通栏带文案
<template>
<div class="md-example-child md-example-child-action-bar md-example-child-2">
<md-action-bar :actions="data" @click="onBtnClick">
¥128.00
</md-action-bar>
</div>
</template>
<script>
import {ActionBar, Dialog} from 'mand-mobile'
export default {
name: 'action-bar-demo',
components: {
[ActionBar.name]: ActionBar,
},
data() {
return {
data: [
{
text: '操作',
},
],
}
},
methods: {
onBtnClick(event, action) {
Dialog.alert({
content: `${action.text}完成`,
})
},
},
}
</script>
通栏多按钮禁用
<template>
<div class="md-example-child md-example-child-action-bar md-example-child-1">
<md-action-bar :actions="data"></md-action-bar>
</div>
</template>
<script>
import {ActionBar, Toast} from 'mand-mobile'
export default {
name: 'action-bar-demo',
components: {
[ActionBar.name]: ActionBar,
},
data() {
return {
data: [
{
text: '操作一',
disabled: true,
},
{
text: '操作二',
onClick: this.handleClick,
},
{
text: '操作三',
disabled: true,
},
],
}
},
methods: {
handleClick() {
Toast.succeed('Click')
},
},
}
</script>
API
ActionBar Props
属性 | 说明 | 类型 | 默认值 | 备注 |
---|---|---|---|---|
actions | 按钮组 | Array<{text, disabled, onClick}> | - | text 为按钮文案,disabled 为是否禁用该按钮,onClick 为点击事件响应函数,传参数与click 事件相同 |
has-text | 是否显示文案 | Boolean | 是否含有slot | 文案可通过slot 传入 |
ActionBar Events
@click(event, action)
按钮点击事件
属性 | 说明 | 类型 |
---|---|---|
action | actions列表中与被点击按钮对应的对象 | Object: {text, disabled, …} |