Skip to content

n-radio-group 单选组 ​

纵向布局的单选容器,默认插槽放 n-radio 成员,统一接管成员的选中值与整组禁用。推荐配合 n-radio 使用(成员自动经组上下文接管选中态,单项不再各自维护状态)。

  1. 值源在组容器:v-model 自动回写(update:modelValue 与 change 同参同发)完成受控闭环
  2. 单选语义:点击已选中项不派发事件,是否取消由页面状态决定
  3. 整组禁用与成员自身 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 等列表组件承担

记录 · 思考 · 创作