RNButtonGroup 按钮组组件

按钮排排队组件

• 👶 让按钮们乖乖排好队
• 🎨 统一管理它们的样式
• 🎯 轻松处理点击事件
• 🔄 支持双向绑定

基础用法

最简单的按钮组用法。

配置透明

见ghost鬼了, 脸都吓白了。

配置高亮

支持主题色的按钮组,高亮一下表示激活选中了。

配置大小

没大没小, 不同场景可能需要的大小不一致。

是否垂直

我直了

API

Props

参数	说明	类型	默认值
options	按钮配置项	ButtonOption[]	[]
primary	是否使用主题色	boolean	false
size	按钮大小	'tiny' | 'small' | 'medium' | 'large'	'small'
vertical	是否垂直排列	boolean	false
value(v-model)	当前选中值	string | number	-

ButtonOption 配置项

参数	说明	类型	默认值
label	按钮文本	string	-
value	按钮值	string | number	-
disabled	是否禁用	boolean	false
type	按钮类型	'default' | 'primary' | 'info' | 'success' | 'warning' | 'error'	'default'
onClick	点击回调	(option: ButtonOption) => void	-

事件

事件名	说明	回调参数
update:value	值更新时触发	(value: string | number, option: ButtonOption) => void

继承的属性

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

• size：按钮组大小
• vertical：是否垂直排列
• 等等...

注意事项

1. 样式处理：

   • 通过 primary 属性控制是否使用主题色
   • 每个按钮可以单独设置 type 属性
   • 支持统一的尺寸控制

2. 事件处理：

   • 支持 v-model 双向绑定
   • 可以通过 onClick 处理单个按钮点击
   • update:value 事件提供完整的选项信息

3. 布局控制：

   • 默认水平排列
   • 通过 vertical 属性切换垂直排列
   • 按钮宽度会自适应内容

4. 状态管理：

   • 支持按钮禁用状态
   • 选中状态通过 value 控制
   • 支持动态更新选项

5. 性能优化：

   • 选项变化时会自动缓存计算结果
   • 避免不必要的重渲染