Checkbox 复选框

用于在一组备选项中进行多项选择的表单控件，支持单节点独立使用或结合 <mu-checkbox-group> 批量进行数组管理与多选数量限制。

---

代码示例

1. 独立单选 (Single Usage)

单独使用 <mu-checkbox> 绑定 v-model 布尔值，常用于服务条款、隐私协议的勾选确认。

<template>
  <mu-checkbox v-model="checked" label="同意《用户服务协议》与《隐私政策》" />
</template>

<script setup>
import { ref } from 'vue'
const checked = ref(true)
</script>

---

2. 复选框组多选 (Checkbox Group)

使用 <mu-checkbox-group> 包裹多个子复选框，组件会自动在 v-model 中维护选中的字符串/数值数组。

<template>
  <mu-checkbox-group v-model="fruits" direction="horizontal">
    <mu-checkbox name="apple" label="苹果 Apple" />
    <mu-checkbox name="banana" label="香蕉 Banana" />
    <mu-checkbox name="orange" label="橘子 Orange" />
  </mu-checkbox-group>
</template>

<script setup>
import { ref } from 'vue'
const fruits = ref(['apple', 'orange'])
</script>

---

3. 限制最大勾选数量 (Max Items)

在 <mu-checkbox-group> 上设置 :max="2" 限制用户最多只能勾选 2 个选项。

<template>
  <mu-checkbox-group v-model="techs" :max="2" direction="horizontal">
    <mu-checkbox name="vue" label="Vue.js" />
    <mu-checkbox name="react" label="React" />
    <mu-checkbox name="uniapp" label="UniApp" />
  </mu-checkbox-group>
</template>

---

4. 禁用状态 (Disabled)

设置 disabled 属性禁用单个选项或整组更改。

<template>
  <mu-checkbox :model-value="true" disabled label="不可取消已选中" />
  <mu-checkbox :model-value="false" disabled label="不可勾选未选中" />
</template>

---

API 属性说明

Checkbox Props

参数名	说明	类型	可选值	默认值
v-model	独立使用时的选中布尔状态	Boolean	true | false	false
name	在 CheckboxGroup 组内绑定的唯一标识值	String | Number | Boolean	-	''
label	复选框旁显示的文案	String	-	''
disabled	是否禁用勾选	Boolean	true | false	false

CheckboxGroup Props

参数名	说明	类型	可选值	默认值
v-model	选中的 name 集合数组	Array	-	[]
direction	子复选框排列方向	String	horizontal | vertical	'vertical'
max	最多可选数量 (0 表示不限制)	Number	-	0

---

事件说明 (Events)

事件名	说明	回调参数
change	勾选状态发生改变时触发	(value: Boolean | Array)
update:modelValue	状态改变双向绑定更新	(value: Boolean | Array)

---

插槽说明 (Slots)

插槽名	说明
default	自定义复选框右侧 label 文案与内容区域