Toolbar

1.9.0 新增

工具栏，可以组合多个按钮，复选框操作为一个工具栏。

示例

• 基础使用

  将每个操作的类型和文本传入 actions 属性。

  <cube-toolbar :actions="actions" @click="clickHandler"></cube-toolbar>
  

  export default {
    data() {
      return {
        money: 10,
        actions: [
          {
            text: '完成订单',
            action: 'showText'
          },
          {
            text: '打车来接',
            checked: false,
            type: 'checkbox'
          },
          {
            text: '一口价<span class="orange">10元</span>',
            action: 'moreMoney'
          }
        ]
      }
    },
    methods: {
      showText(item) {
        this.$createToast({
          type: 'correct',
          txt: 'clicked ' + item.text,
          time: 1000
        }).show()
      },
      moreMoney(item) {
        this.money += 10
        item.text = '一口价<span class="orange">' + this.money + '元</span>'
      },
      clickHandler(item) {
        if (item.action) {
          this[item.action](item)
        }
      }
    }
  }
  

  .orange
    color: #fc9153
  

• 更多操作

  你还可以通过 moreActions 属性传入更多操作，就会把工具栏扩展成可展开收起的双层工具栏。

  <cube-toolbar
    :actions="actions"
    :more-actions="moreActions"
    @click="clickHandler"></cube-toolbar>
  

  export default {
    data() {
      return {
        money: 10,
        actions: [
          {
            text: '完成订单',
            action: 'showText'
          },
          {
            text: '打车来接',
            checked: false,
            type: 'checkbox'
          },
          {
            text: '一口价<span class="orange">10元</span>',
            action: 'moreMoney'
          }
        ],
        moreActions: [
          {
            text: '操作a',
            action: 'showText'
          },
          {
            text: '操作b',
            action: 'showText'
          },
          {
            text: '操作c',
            icon: 'cubeic-right',
            action: 'showText'
          }
        ]
      }
    },
    methods: {
      showText(item) {
        this.$createToast({
          type: 'correct',
          txt: 'clicked ' + item.text,
          time: 1000
        }).show()
      },
      moreMoney(item) {
        this.money += 10
        item.text = '一口价<span class="orange">' + this.money + '元</span>'
      },
      clickHandler(item) {
        if (item.action) {
          this[item.action](item)
        }
      }
    }
  }
  

  .orange
    color: #fc9153
  

Props 配置

• actions 子配置项

事件