n-checkbox 复选框
方形盒 + 勾选形 + 文案的纯 CSS 复选控件(无原生 checkbox 元素,样式与行为全自绘)。推荐放进 n-checkbox-group 使用,由组容器统一管理选中值集合;也可以独立使用(checked + change 受控)。
- 复选语义:勾选与取消两个方向的点击都派发
change(与单选框不同)- 组内使用的单项不派发
change,由n-checkbox-group统一派发(回调参数为最新选中值数组)indeterminate半选只是视觉形态(显示短横),点击派发值仍按checked取反计算,是否清掉半选由页面在 change 回调里维护
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
API
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| name | 该项对应的值:组内选中后组容器 change 事件与 modelValue 携带的就是它;同一组内必须唯一 | String | "" | - |
| checked | 独立使用时的选中态(受控;放进 n-checkbox-group 时由组接管,本属性不参与) | Boolean | false | - |
| indeterminate | 半选形态(勾选形位置显示短横);纯视觉不参与点击计算,是否清掉由页面在 change 回调里维护 | Boolean | false | - |
| disabled | 禁用(保留配色降透明度并拦截点击;组内使用时叠加组级 disabled) | Boolean | false | - |
| label | 复选框右侧文案;留空只渲染方盒(触控区不变) | String | "" | - |
| color | 选中态颜色(盒底色与描边,实色值),勾选形颜色按其亮度自适应黑白;留空取主题品牌色 | String | "" | 与 css 相同 |
| shape | 盒的形状 | String | square | square / circle |
| label-disabled | 点击文案是否不切换选中(盒区仍可切换);文案含链接等可点内容时使用 | Boolean | false | - |
| label-style | 微调文案的行内样式,如 "font-weight:600"(页面 class 打不进组件内部) | String | "" | 与 css 相同 |
| custom-class | 挂到根节点的额外 class(类需定义在组件样式表内) | String | "" | - |
| custom-style | 根节点行内样式,如 "margin-right:12px" 用于横排时拉开单项间距 | String | "" | 与 css 相同 |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 仅独立使用时触发(组内使用由组容器统一派发,单项不重复派发);勾选与取消两个方向都触发 | 切换后的选中态(Boolean) |
插槽
无(文案用 label)。