Toolbar

优质

小牛编辑

126浏览

2023-12-01

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	定义一组操作	Array	[]	[ {text: '完成订单' } ]
moreActions	定义更多的一组操作	Array	[]	[ {text: '完成订单' } ]

actions 子配置项

参数	说明	类型	可选值	默认值
type	类型，包括 button 和 checkbox	String	button/checkbox	button
text	文案，支持写入 html	String	-	''
checked	当为 checkbox 类型时，checkbox的初始状态	Boolean	true/false	false

事件

事件名	说明	参数
click	点击某一项触发	该项 item 的值
more-click	当有更多操作时，点击更多按钮时触发	更多操作是否是显示状态