UniApp 组件 · 实验
UGCheckbox 复选框
用于多项选择的复选框，支持受控、半选和禁用状态。
组件预览
以下画面来自同一组件源码的 H5 构建，用于检查内容、状态和主题；MP-WEIXIN 最终外观仍以开发者工具和真机为准。
使用方式
配置 easycom 后直接使用 <ug-checkbox>，无需在页面脚本中导入组件。
vue
<script setup lang="ts">
import { ref } from 'vue'
const accepted = ref(false)
</script>
<template><ug-checkbox v-model="accepted" label="同意服务条款" /></template>
easycom 公开入口：@ug666/ui-uniapp/components/ug-checkbox/ug-checkbox.vue
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| modelValue | boolean | false | 通过 v-model 管理选中状态。 |
| value | string | 'checked' | 透传给原生 checkbox 的标识。 |
| label | string | — | 选项文字，也可使用默认插槽。 |
| disabled | boolean | Provider | 禁用选项。 |
| size | 'sm' | 'md' | 'lg' | Provider | 通过缩放原生控件设置尺寸。 |
| activeColor | string | Token primary | 选中颜色。 |
事件
| 事件 | 参数 | 说明 |
|---|---|---|
| update:modelValue | value: boolean | 选中状态变化后更新 v-model。 |
| change | value: boolean | 返回新的布尔值。 |
注意事项
- 当前组件面向单个布尔选项，不提供数据驱动的复选框组。
- 尺寸依赖原生 checkbox 的缩放表现，需在真机确认点击区域。
平台边界
总览中的画面来自同一组件源码的 H5 构建，只用于辅助浏览；小程序真实外观仍以 Demo 在微信开发者工具和真机中的结果为准。
MP-WEIXIN 已编译
开发者工具与真机待验证