vel-more-button，一个更加易用的按钮组、下拉菜单

vel-more-button是一个基于Element Plus开发的，更加易用的按钮组、下拉菜单。用法简单，并且能够根据容器宽度，自动折叠按钮。

安装

npm install vel-more-button
# 或者使用pnpm
pnpm install vel-more-button

使用

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

<template>
    <!-- 最多显示3个按钮，超过部分变为下拉菜单 -->
    <VelMoreButtonGroup :max="3">
        <VelMoreButtonItem content="Default" />
        <!-- 下拉菜单 -->
        <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">
            <!-- 通过 content 插槽自定义渲染内容 -->
            <template #content>
                <span style="color: red;">Danger</span>
            </template>
        </VelMoreButtonItem>
    </VelMoreButtonGroup>
</template>

VelMoreButtonGroup 属性

属性名	说明	类型	默认值
max	按钮最大显示数量，默认0通过容器宽度自动计算	number	0
size	尺寸	枚举：'large' 'default' 'small'	-
text	是否为文字按钮	boolean	false
link	是否为链接按钮	boolean	false
more-text	更多按钮文本	string	更多

VelMoreButtonGroup 插槽

插槽名	说明	子标签
default	自定义默认内容	VelMoreButtonItem

VelMoreButtonItem 属性

属性名	说明	类型	默认值
content	按钮内容	string	-
disabled	是否禁用	boolean	false
-	支持按钮配置其他属性参考 el-button	-	-

VelMoreButtonItem 事件

事件名	说明	类型
click	点击事件，如果绑定的回调函数返回Promise，会自动添加loading效果	(e: Event) => void | Promise

VelMoreButtonItem 插槽

插槽名	说明	子标签
default	默认插槽，下拉菜单使用，只能放置VelMoreButtonItem	VelMoreButtonItem
content	按钮内容	-

FAQ

为什么用el-cascader做下拉菜单?

el-dropdown不支持多级菜单，故选用el-cascader

修改按钮样式的限制

max属性值为0根据容器宽度自动计算时，如需通过css修改按钮尺寸，如使用子元素选择器.group > .el-button修改按钮尺寸，会导致max计算错误，只能通过行内样式style和后代选择器.group .el-button修改

<template>
  <VelMoreButtonGroup class="my-button-group">
    <!-- 正确，可以通过style属性设置button尺寸 -->
    <VelMoreButtonItem content="按钮1" style="width: 100px" />
    <VelMoreButtonItem content="按钮2" type="success" class="my-button-item-1" />
    <VelMoreButtonItem content="按钮3" type="info" class="my-button-item-2" />
  </VelMoreButtonGroup>
</template>
<style>
/* 错误，使用子元素选择器，会导致max计算错误 */
.my-button-group > .my-button-item-1{
  width: 100px;
}
/* 正确，使用后代选择器，可以正确计算max */
.my-button-group .my-button-item-2{
  width: 100px;
}
</style>