VelMoreButtonGroup API Documentation

A more user-friendly button group and dropdown menu developed based on Element Plus

英文 | 中文

Install

npm install vel-more-button
# Or use pnpm
pnpm install vel-more-button

Usage

<script setup lang="ts">
import { VelMoreButtonGroup, VelMoreButtonItem } from 'vel-more-button'
</script>

<template>
    <!-- Display up to 3 buttons, and any excess will become a dropdown menu -->
    <VelMoreButtonGroup :max="3">
        <VelMoreButtonItem content="Default" />
        <!--  dropdown menu -->
        <VelMoreButtonItem type="primary" content="Primary">
            <VelMoreButtonItem content="menu1" />
            <VelMoreButtonItem content="menu2">
                <VelMoreButtonItem content="menu2-1" />
                <VelMoreButtonItem content="menu2-2" />
            </VelMoreButtonItem>
            <VelMoreButtonItem content="menu3" />
        </VelMoreButtonItem>
        <VelMoreButtonItem type="success" content="Success" />
        <VelMoreButtonItem type="info" content="Info" />
        <VelMoreButtonItem type="warning" content="Warning" />
        <VelMoreButtonItem type="danger">
            <!-- Customize rendering content through content slots -->
            <template #content>
                <span style="color: red;">Danger</span>
            </template>
        </VelMoreButtonItem>
    </VelMoreButtonGroup>
</template>

VelMoreButtonGroup Properties

Property	Description	Type	Default
max	Maximum number of buttons displayed. Default is 0, which allows automatic calculation based on container width.	number	0
size	Size	Enum: 'large' 'default' 'small'	-
text	Whether it is a text button	boolean	false
link	Whether it is a link button	boolean	false
more-text	Text for the "more" button	string	更多

VelMoreButtonGroup Slots

Slot Name	Description	Child Tag
default	Custom default content	VelMoreButtonItem

VelMoreButtonItem Attributes

Property	Description	Type	Default
content	Button content	string	-
disabled	Whether it is disabled	boolean	false
-	Supports other button configuration properties, see the el-button documentation for more details.	-	-

VelMoreButtonItem Events

Name	Description	Type
click	Click on the event. If the bound callback function returns Promise, the loading effect will be automatically added	(e: Event) => void | Promise

VelMoreButtonItem Slots

Slot Name	Description	Child Tag
default	Default slot for dropdown menus, can only contain VelMoreButtonItem	VelMoreButtonItem
content	Button content	-

FAQ

Why use el-cascader for dropdown menus?

el-dropdown does not support multi-level menus, so use el-cascader

Restrictions on modifying button styles

When the max attribute value is 0 and is automatically calculated based on the container width, if you need to modify the button size through CSS, using a child element selector like .group > .el-button to change the button size will lead to incorrect max calculations. Instead, you should use inline styles style or descendant selectors like .group .el-button for proper modification.

<template>
  <VelMoreButtonGroup class="my-button-group">
    <!-- Correct, button size can be set via style attribute -->
    <VelMoreButtonItem content="Button 1" style="width: 100px" />
    <VelMoreButtonItem content="Button 2" type="success" class="my-button-item-1" />
    <VelMoreButtonItem content="Button 3" type="info" class="my-button-item-2" />
  </VelMoreButtonGroup>
</template>
<style>
/* Incorrect, using child element selector causes incorrect max calculation */
.my-button-group > .my-button-item-1{
  width: 100px;
}
/* Correct, using descendant selector allows correct max calculation */
.my-button-group .my-button-item-2{
  width: 100px;
}
</style>