[功能请求] 添加 `VSplitButton` 组件
作者: avinash-skylarkdrones创建于 2025年9月17日更新于 2026年9月11日
标签T: featureC: New Component
需要解决的问题
说明
目前, Vuetify 不提供内置的 QQSplitButton 组件 。 `Split按钮 ' 组合如下:
- 主要动作按钮**(执行最常见的/主要动作)。
- 二次降级的切换**(披露更多相关行动)。
这种模式被广泛用于企业应用程序,管理面板和生产力工具来减少按钮杂乱,同时仍然提供快速访问多个相关指令.
-- -- . . .
建议的API/使用示例
{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你还好吧? < v- split- btn 标签="拯救" [ {标签:"保存为草稿",值:"草稿"}, {标签:'Save & Publish',值:'publish'} []" 颜色="初级" 变体="平面" 大小=“大” @ 点击=" on 保存( S) @ 点击: item=“ 进行平面动作” / > 打开
* ** 方法**:
*`标签'-主要行动案文
* `项目 ' -- -- 降下的项目系列(或允许充分灵活的时间段)
* " 颜色 " 、 " 变相 " 、 " 大小 " ——从`v-btn'继承,以保持一致
* ** 活动**:
* 点击主按钮时“主点击” 。
* 选定下拉项目时单击“项目”
-- -- . . .
为什么这属于Vuetify
* ** Matrial Design Adjacted**:许多现代设计系统(Matrial Design, Fluent UI, Bootstrap, Ant Design)包括了拆分按钮,因为它们解决了常见的UX问题:提供有附近次要选项的 *default * 动作.
* ** 发展经验**:今天,开发者必须手动编写`v-btn' +`v-menu' +`v-list'。 这是重复性的锅炉板,各项目之间不一致。
* ** 一致性**:一个能确保无障碍性(键盘导航、焦点陷阱、aria角色)、一致性的分量/调整和主题支持。
-- -- . . .
今天的替代方案
* 手动编写`v-btn'和`v-menu'并用`v-list'(工作,但动词和容易出错)。
* 使用`v-btn-toggle'(并非完全相同,不支持主要行动+下降)。
-- -- . . .
参考文献
* 材料设计:[分块按钮](https://m3.material.io/ 组件/分块按钮/overview)
* 流利的UI:[`SplitButton'](https://react.fluentui.dev/?path=/docs/组件-按钮-splitbutton-docs)
* 脚踏车:[按键滴出 (https://getbootstrap.com/docs/5.3/ 组件/滴出/#分出-按钮)
* 蚂蚁设计:[倒下按钮](https://ant.design/组件/倒下/#组件-倒下-demo倒下-按钮).
-- -- . . .
++ 附加上下文
这一构成部分在**企业仪表板**、**admin小组**和**数据重的应用程序**中将特别有价值,在这些应用程序中,需要无障碍但并非压倒性的背景行动。
# 建议的解决办法
{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你还好吧?
< template> (简体中文)
<div class='d-inline-flex" (中文(简体) ).
<!- 初级动作按钮- >
<v-btn 时
: color="props.color" (中文(简体) ).
: variant="道具. variant" (中文(简体) ).
:大小=“道具大小”
@ click=“emit ('click') ” (“单击”)
> 翻译:
< slot-} 道具. label */ slot >
</v-btn> (法语).
<!-- 降下菜单- >
<v-菜单>
<template#activator=>{道具:菜单道具}}>
<v-btn 时
v- bind=“菜单”
. . . . . . .内容来源: vuetifyjs/vuetify