VelMoreButtonGroup API文档

一个基于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>