ActionBar 操作栏

Scan me!

汇集若干文案或操作按钮的吸底边栏,可用于展示表单信息与提交按钮

引入

  1. import { ActionBar } from 'mand-mobile'
  2. Vue.component(ActionBar.name, ActionBar)

代码演示

通栏多按钮

  1. <template>
  2. <div class="md-example-child md-example-child-action-bar md-example-child-0">
  3. <md-action-bar :actions="data"></md-action-bar>
  4. </div>
  5. </template>
  6. <script>
  7. import {ActionBar, Toast} from 'mand-mobile'
  8. export default {
  9. name: 'action-bar-demo',
  10. components: {
  11. [ActionBar.name]: ActionBar,
  12. },
  13. data() {
  14. return {
  15. data: [
  16. {
  17. text: '操作一',
  18. onClick: this.handleClick,
  19. },
  20. {
  21. text: '操作二',
  22. onClick: this.handleClick,
  23. },
  24. ],
  25. }
  26. },
  27. methods: {
  28. handleClick() {
  29. Toast.succeed('Click')
  30. },
  31. },
  32. }
  33. </script>
  34.  

通栏带文案

  1. <template>
  2. <div class="md-example-child md-example-child-action-bar md-example-child-2">
  3. <md-action-bar :actions="data" @click="onBtnClick">
  4. &yen;128.00
  5. </md-action-bar>
  6. </div>
  7. </template>
  8. <script>
  9. import {ActionBar, Dialog} from 'mand-mobile'
  10. export default {
  11. name: 'action-bar-demo',
  12. components: {
  13. [ActionBar.name]: ActionBar,
  14. },
  15. data() {
  16. return {
  17. data: [
  18. {
  19. text: '操作',
  20. },
  21. ],
  22. }
  23. },
  24. methods: {
  25. onBtnClick(event, action) {
  26. Dialog.alert({
  27. content: `${action.text}完成`,
  28. })
  29. },
  30. },
  31. }
  32. </script>
  33.  

通栏多按钮禁用

  1. <template>
  2. <div class="md-example-child md-example-child-action-bar md-example-child-1">
  3. <md-action-bar :actions="data"></md-action-bar>
  4. </div>
  5. </template>
  6. <script>
  7. import {ActionBar, Toast} from 'mand-mobile'
  8. export default {
  9. name: 'action-bar-demo',
  10. components: {
  11. [ActionBar.name]: ActionBar,
  12. },
  13. data() {
  14. return {
  15. data: [
  16. {
  17. text: '操作一',
  18. disabled: true,
  19. },
  20. {
  21. text: '操作二',
  22. onClick: this.handleClick,
  23. },
  24. {
  25. text: '操作三',
  26. disabled: true,
  27. },
  28. ],
  29. }
  30. },
  31. methods: {
  32. handleClick() {
  33. Toast.succeed('Click')
  34. },
  35. },
  36. }
  37. </script>
  38.  

API

ActionBar Props

属性说明类型默认值备注
actions按钮组Array<{text, disabled, onClick}>-text为按钮文案,disabled为是否禁用该按钮,onClick为点击事件响应函数,传参数与click事件相同
has-text是否显示文案Boolean是否含有slot文案可通过slot传入

ActionBar Events

@click(event, action)

按钮点击事件

属性说明类型
actionactions列表中与被点击按钮对应的对象Object: {text, disabled, …}