n-radio-group 单选组
纵向布局的单选容器,默认插槽放 n-radio 成员,统一接管成员的选中值与整组禁用。推荐配合 n-radio 使用(成员自动经组上下文接管选中态,单项不再各自维护状态)。
- 值源在组容器:
v-model自动回写(update:modelValue与change同参同发)完成受控闭环- 单选语义:点击已选中项不派发事件,是否取消由页面状态决定
- 整组禁用与成员自身
disabled叠加,任一生效即禁用
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
API
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| model-value | 当前选中项的值(等于某个成员的 name);不匹配任何成员时全组不选中 | String | "" | - |
| disabled | 整组禁用:所有成员点击被拦截(保色相降透明),叠加成员自身的 disabled | Boolean | false | - |
| custom-class | 挂到根节点的额外 class(类需定义在组件样式表内) | String | "" | - |
| custom-style | 根节点行内样式,如 "flex-direction:row" 横排 | String | "" | 与 css 相同 |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:model-value | 新选中项的值;与 change 同参同发,v-model 即此通道(自动回写) |
新选中项的值(String) |
| change | 组内成员被点击选中时触发;点击已选中项不触发 | 新选中项的值(String) |
插槽
| 插槽名 | 说明 |
|---|---|
| default | 放 n-radio 成员(每项的 name 在组内必须唯一) |
实现说明
| 机制 | 参考做法 | 本库做法 | 分歧理由 |
|---|---|---|---|
| 值通道 | 部分参考组只有 change(页面手动回写),部分有 v-model | update:modelValue 与 change 同参同发 | 库内受控组件统一双事件通道:v-model 自动回写完成闭环,change 供业务监听(toast、校验等) |
| 排列方向 | placement prop(row / column) | custom-style 覆盖 flex-direction(默认 column) | 组是纯布局容器,方向即一行行内样式,不设 prop 保持最小面 |
| 成员簿记 | 组件树遍历 + 子项注册数组(增删要同步簿记) | provide/inject 字符串键下发上下文,成员渲染时自取 | 无注册簿即无增删同步负担——v-for 动态增删选项天然正确 |
| 组级统一下发 | 组上下发 activeColor / size / 形状给全部成员 | 值与禁用下发,色与尺寸留在成员自身(令牌可全局统一) | 值与禁用是组的语义职责;视觉参数收敛一处(成员/令牌),避免两级来源歧义 |
| 表单字段名 | 组挂 name 供原生 form 收集 | 不设(值由页面状态直取) | 库内表单族未成,原生 form 收集链路不承诺 |
| 底部分隔线 | borderBottom 分组线样式 | 不设 | 组是纯容器无视觉,分隔线由 n-cell 等列表组件承担 |