ByToolBar 工具栏组件

提供一个灵活的工具栏，可以配置按钮、输入框、下拉框、单选框组等，并统一处理事件。

基础用法

简单工具栏

<template>
  <by-tool-bar :items="toolbarItems" @action="handleAction" />
</template>

<script setup>
import { ref } from 'vue'

const toolbarItems = ref([
  {
    type: 'text',
    label: '用户管理',
    props: {
      fontSize: '18px',
      color: '#409EFF',
    },
  },
  {
    type: 'button',
    name: 'add',
    label: '新增',
    props: {
      type: 'primary',
      icon: 'Plus',
    },
  },
  {
    type: 'button',
    name: 'export',
    label: '导出',
    position: 'right',
  },
])

const handleAction = (event) => {
  console.log('工具栏事件:', event)
}
</script>

表单控件工具栏

<template>
  <by-tool-bar :items="formItems" @action="handleFormAction" />
</template>

<script setup>
import { ref } from 'vue'

const formItems = ref([
  {
    type: 'input',
    name: 'search',
    label: '搜索',
    props: {
      placeholder: '请输入关键词',
      clearable: true,
    },
  },
  {
    type: 'select',
    name: 'status',
    label: '状态',
    props: {
      placeholder: '请选择状态',
      options: [
        { label: '全部', value: '' },
        { label: '启用', value: 1 },
        { label: '禁用', value: 0 },
      ],
    },
  },
  {
    type: 'radio-group',
    name: 'type',
    radios: [
      { label: '全部', value: '' },
      { label: '类型A', value: 'A' },
      { label: '类型B', value: 'B' },
    ],
  },
  {
    type: 'button',
    name: 'search',
    label: '搜索',
    props: {
      type: 'primary',
    },
  },
])

const handleFormAction = (event) => {
  if (event.type === 'update:model-value') {
    console.log(`${event.item.name} 值更新为:`, event.payload)
  }
}
</script>

异步数据工具栏

<template>
  <by-tool-bar :items="asyncItems" @action="handleAsyncAction" />
</template>

<script setup>
import { ref } from 'vue'

const asyncItems = ref([
  {
    type: 'select',
    name: 'department',
    label: '部门',
    props: {
      placeholder: '请选择部门',
      loadOptions: async () => {
        // 模拟异步请求
        await new Promise((resolve) => setTimeout(resolve, 1000))
        return [
          { label: '技术部', value: 'tech' },
          { label: '产品部', value: 'product' },
          { label: '设计部', value: 'design' },
        ]
      },
    },
  },
])

const handleAsyncAction = (event) => {
  console.log('异步选择事件:', event)
}
</script>

只显示占位符的下拉框

<template>
  <by-tool-bar :items="placeholderItems" @action="handlePlaceholderAction" />
</template>

<script setup>
import { ref } from 'vue'

const placeholderItems = ref([
  {
    type: 'select',
    name: 'category',
    label: '分类',
    props: {
      placeholder: '请选择分类',
      onlyShowPlaceholder: true, // 只显示占位符，不显示选中值
      options: [
        { label: '技术', value: 'tech' },
        { label: '产品', value: 'product' },
        { label: '设计', value: 'design' },
      ],
    },
  },
])

const handlePlaceholderAction = (event) => {
  if (event.type === 'change') {
    console.log('选中了分类:', event.payload)
    // 这里可以处理选中逻辑，但下拉框仍然只显示placeholder
  }
}
</script>

API

Props

参数	说明	类型	默认值
items	工具栏项配置	ToolBarItem[]	[]

Events

事件名	说明	回调参数
action	工具栏项事件触发	ToolBarActionEvent

ToolBarItem 配置

参数	说明	类型	默认值
type	组件类型	ToolBarItemType	-
name	组件名称，用于事件标识	string	-
label	显示文本	string	-
position	位置，'left' 或 'right'	'left' | 'right'	'left'
hidden	是否隐藏	boolean	false
disabled	是否禁用	boolean	false
slot	自定义插槽名称	string	-
props	组件属性	ToolBarItemProps	-
radios	单选框选项（仅 RadioGroup 类型）	ToolBarItemRadio[]	-

组件类型

• text - 文本组件
• button - 按钮组件
• select - 下拉框组件
• input - 输入框组件
• radio-group - 单选框组组件

ToolBarItemProps 属性

参数	说明	类型	默认值
size	组件尺寸	string	'default'
loading	是否显示加载状态	boolean	false
options	下拉框选项（仅 Select 类型）	ToolBarItemOption[]	-
loadOptions	异步加载选项函数（仅 Select 类型）	() => Promise<ToolBarItemOption[]>	-
icon	图标名称（仅 Button 类型）	string	-
fontSize	字体大小（仅 Text 类型）	string	'16px'
color	字体颜色（仅 Text 类型）	string	'#333333'
maxWidth	最大宽度（仅 Text 类型）	string	'300px'
width	宽度（仅 Text 类型）	string	-
children	子文本内容（仅 Text 类型）	string	-
innerHTML	HTML内容（仅 Text 类型）	string	-
onlyShowPlaceholder	是否只显示占位符（仅 Select 类型）	boolean	false

注意事项

1. name 属性：对于需要双向绑定的表单控件，建议设置 name 属性
2. 事件处理：所有组件事件都会通过 action 事件统一分发
3. 响应式更新：组件会自动处理表单控件的值更新和重新渲染
4. 插槽使用：可以通过 slot 属性使用自定义插槽内容
5. onlyShowPlaceholder：当 Select 组件设置 onlyShowPlaceholder: true 时，组件将只显示占位符内容，不会显示选中的值，但选中操作仍会触发相应的事件回调