vel-more-button v0.0.2

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 属性

VelMoreButtonGroup 插槽

VelMoreButtonItem 属性

VelMoreButtonItem 事件

VelMoreButtonItem 插槽

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>