OverflowToolbar

When there are too many toolbar items and the container width is insufficient to display all items, the overflow items are automatically collapsed into a "More" popover. Suitable for toolbars, tab bars, action button groups, and similar scenarios.

Basic Usage

Pass a list array to render toolbar items. When the container width is insufficient, excess items will automatically collapse into a "More" popover.

Custom Slots

You can fully customize the toolbar items and popover styles through the item, more, and more-content slots.

Props

Name	Description	Type	Default
list	Toolbar item list	OverflowToolbarItem[]	[]
trigger	Popover trigger method	'click' | 'hover'	'click'
visiblePopover	Control popover visibility (v-model)	boolean	undefined
minShowNum	Minimum number of items to display	number	0

Slots

Name	Description	Slot Props
item	Custom toolbar item	{ item: OverflowToolbarItem }
more	Custom "More" button	-
more-content	Custom popover content	{ overflowList: OverflowToolbarItem[] }

Methods

The following methods can be called after obtaining the component instance via ref:

Name	Description	Type
forceUpdate	Force update the component, must be called after list items change	() => void

Type Definitions

Can be imported directly

import { OverflowToolbarItem } from 'element-ai-vue'

OverflowToolbarItem

interface OverflowToolbarItem {
  /** Unique identifier */
  key: string | number
  /** Display text */
  text?: string
  /** Icon URL */
  icon?: string
  /** Other custom properties */
  [key: string]: any
}

Dynamic List Updates

When dynamically adding or removing list items, you need to call the forceUpdate() method to force refresh the component layout:

const overflowToolbarRef = useTemplateRef('overflowToolbarRef')

// After adding an item
list.value.push({ key: 'new-item', text: 'New Item' })
overflowToolbarRef.value?.forceUpdate()

// After removing an item
list.value.pop()
overflowToolbarRef.value?.forceUpdate()