Skip to content

n-checkbox 复选框 ​

方形盒 + 勾选形 + 文案的纯 CSS 复选控件(无原生 checkbox 元素,样式与行为全自绘)。推荐放进 n-checkbox-group 使用,由组容器统一管理选中值集合;也可以独立使用(checked + change 受控)。

  1. 复选语义:勾选与取消两个方向的点击都派发 change(与单选框不同)
  2. 组内使用的单项不派发 change,由 n-checkbox-group 统一派发(回调参数为最新选中值数组)
  3. 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)。

记录 · 思考 · 创作