Honeycomb Design

# 工具栏 Toolbar

组合多个按钮，满足产品按钮布局场景

# 按钮点击

按钮点击

只要click方法返回Promise对象即可触发按钮异步状态，触发异步开始后结束前按钮无法再次触发点击 

<title>按钮点击</title>
<describe>
  只要click方法返回Promise对象即可触发按钮异步状态，触发异步开始后结束前按钮无法再次触发点击
</describe>
<template>
    <hc-toolbar :items="items"></hc-toolbar>
</template>
<script>
export default {
    data: function() {
      return {
        items: [
          {
            name: 'name1',
            label: '普通点击',
            click: function() {
              console.log('触发了点击')
            },
          },
          {
            name: 'name2',
            label: '异步点击',
            click: function() {
              // 建模在线编码需要使用$util.deffer和$_.delay代替Promise和setTimeout
              return new Promise((resolve, reject) => {
                setTimeout(function() {
                  resolve()
                }, 3000)
              })
            }
          }
        ]
      }
    }
}
</script>

# 菜单按钮

菜单按钮

配置菜单按钮，使非主要按钮隐藏起来

<title>菜单按钮</title>
<describe>配置菜单按钮，使非主要按钮隐藏起来</describe>
<template>
    <hc-toolbar :items="items"></hc-toolbar>
</template>
<script>
export default {
    data: function() {
      return {
        items: [
          {
            name: 'name5',
            label: '菜单按钮',
            items: [
              { name: 'item1', label: '菜单项1' },
              {
                name: 'item2',
                label: '菜单项2',
                click: function() {
                  console.log('点击菜单项2')
                }
              }
            ]
          }
        ]
      }
    }
}
</script>

# 动态隐藏按钮

动态隐藏按钮

根据业务场景，可以使某些按钮在特定场景下隐藏

<title>动态隐藏按钮</title>
<describe>根据业务场景，可以使某些按钮在特定场景下隐藏</describe>
<template>
    <hc-checkbox v-model="hide" label="隐藏驳回"></hc-checkbox>
    <hc-toolbar :items="items"></hc-toolbar>
</template>
<script>
export default {
    data: function() {
      return {
        hide: false
      }
    },
    computed: {
      items: function () {
        var me = this
        return [
         {
           name: 'pass',
           type: 'primary',
           label: '通过'
         },
         {
           name: 'reject',
           label: '驳回',
           visible: function () {
             // 返回false表示不显示按钮
             return !me.hide
           }
         }
       ]
      }
    }
}
</script>

# 属性及事件

# HcToolbar属性

属性 说明 类型 可选值 默认值
items 工具栏按钮数组配置 ToolbarItem[] -- --
align 定义工具栏对齐方向 string left / center / right left

# ToolbarItem 属性

属性 说明 类型 可选值 默认值
label 按钮文本 string -- --
name 按钮唯一名称 string -- --
click 点击事件回调,支持异步点击事件，返回Promise对象，会默认触发loading状态 function -- --
type 定义按钮类型 string default/primary/success/warning/danger/text default
disabled 是否禁用 boolean -- false
visible 是否显示 boolean -- true
items 工具栏菜单数组，菜单按钮不支持继续嵌套 ToolbarItem -- --

← 步骤条 Steps →