Toolbar

1.9.0 新增

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

示例

基础使用

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

  1. <cube-toolbar :actions="actions" @click="clickHandler"></cube-toolbar>
  1. export default {
  2.   data() {
  3.     return {
  4.       money: 10,
  5.       actions: [
  6.         {
  7.           text: '完成订单',
  8.           action: 'showText'
  9.         },
  10.         {
  11.           text: '打车来接',
  12.           checked: false,
  13.           type: 'checkbox'
  14.         },
  15.         {
  16.           text: '一口价<span class="orange">10元</span>',
  17.           action: 'moreMoney'
  18.         }
  19.       ]
  20.     }
  21.   },
  22.   methods: {
  23.     showText(item) {
  24.       this.- createToast({
  25.         type: 'correct',
  26.         txt: 'clicked ' + item.text,
  27.         time: 1000
  28.       }).show()
  29.     },
  30.     moreMoney(item) {
  31.       this.money += 10
  32.       item.text = '一口价<span class="orange">' + this.money + '元</span>'
  33.     },
  34.     clickHandler(item) {
  35.       if (item.action) {
  36.         this[item.action](item)
  37.       }
  38.     }
  39.   }
  40. }
  43. .orange
  44.   color: #fc9153
  47. - 
  48. 更多操作
  50. 你还可以通过 moreActions 属性传入更多操作，就会把工具栏扩展成可展开收起的双层工具栏。
  52. <cube-toolbar :actions="actions" :more-actions="moreActions" @click="clickHandler"></cube-toolbar>
  55. export default {
  56.   data() {
  57.     return {
  58.       money: 10,
  59.       actions: [
  60.         {
  61.           text: '完成订单',
  62.           action: 'showText'
  63.         },
  64.         {
  65.           text: '打车来接',
  66.           checked: false,
  67.           type: 'checkbox'
  68.         },
  69.         {
  70.           text: '一口价<span class="orange">10元</span>',
  71.           action: 'moreMoney'
  72.         }
  73.       ],
  74.       moreActions: [
  75.         {
  76.           text: '操作a',
  77.           action: 'showText'
  78.         },
  79.         {
  80.           text: '操作b',
  81.           action: 'showText'
  82.         },
  83.         {
  84.           text: '操作c',
  85.           icon: 'cubeic-right',
  86.           action: 'showText'
  87.         }
  88.       ]
  89.     }
  90.   },
  91.   methods: {
  92.     showText(item) {
  93.       this.- createToast({
  94.         type: 'correct',
  95.         txt: 'clicked ' + item.text,
  96.         time: 1000
  97.       }).show()
  98.     },
  99.     moreMoney(item) {
  100.       this.money += 10
  101.       item.text = '一口价<span class="orange">' + this.money + '元</span>'
  102.     },
  103.     clickHandler(item) {
  104.       if (item.action) {
  105.         this[item.action](item)
  106.       }
  107.     }
  108.   }
  109. }
  1. .orange
  2.   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 当有更多操作时，点击更多按钮时触发 更多操作是否是显示状态

原文:

https://didi.github.io/cube-ui/#/zh-CN/docs/toolbar