RNButtonAction 操作组

很多时候你不想写那么多代码！又不得不写一串操作按钮的场景。

• 🎯 表格里需要展示"编辑"、"删除"之类的操作按钮时
• 📚 一行里有好多按钮要整整齐齐排列时
• 🎪 空间不够但又不想牺牲功能的时候
• 🎨 想让按钮既有图标又有文字更好看的时候
• 🎭 需要让按钮们排排坐、吃果果的时候

基础用法

最简单的用法，水平排列几个按钮。

配置大小And文本模式

bool大大小小,排排坐。

是否垂直And自定义图标

配上几个图标,各自好看。vertical 竖起来的时候就变成下拉选择咯。

API

Props

参数	说明	类型	默认值
options	操作按钮配置项	ActionItem[]	[]
vertical	是否使用垂直下拉菜单模式	boolean	false
stopPropagation	是否阻止事件冒泡	boolean	true
row	行数据（会传递给 handler）	any	-
moreText	下拉菜单按钮文本	string	'更多'

ActionItem 配置项

参数	说明	类型	默认值
label	按钮文本	string	-
value	按钮值（唯一标识）	string | number	-
type	按钮类型	'default' | 'primary' | 'info' | 'success' | 'warning' | 'error'	'default'
icon	按钮图标	() => VNodeChild | undefined	-
disabled	是否禁用	boolean	false
handler	点击处理函数	(data: { e: Event; row: any }) => void	-
props	额外的按钮属性	Record<string, any>	-

事件

事件名	说明	回调参数
select	点击按钮时触发	(value: string | number, option: ActionItem, row: any) => void
update:value	更新按钮值时触发	(value: string | number, option: ActionItem, row: any) => void

继承的属性

组件继承了 Naive UI 的 n-button 的所有属性：

• size：按钮大小
• loading：加载状态
• disabled：禁用状态
• 等等...

注意事项

1. 垂直模式（vertical=true）下：

   • 所有按钮会收起到下拉菜单中
   • 可以通过 moreText 自定义下拉按钮文本
   • 下拉菜单项的样式会自动继承按钮的主题

2. 事件处理：

   • handler 和 select 事件可以同时使用
   • stopPropagation 默认为 true，防止在表格等场景下触发行点击事件

3. 图标使用：

   • 推荐使用 lucide-vue-next 的图标
   • 图标需要通过渲染函数返回 VNode

4. 性能优化：

   • 组件内部做了按钮选项的计算缓存
   • 大量按钮时推荐使用垂直模式

5. 主题定制：

   • 按钮样式会自动跟随 Naive UI 的主题
   • 可以通过 props 传递额外的样式属性