WeUI Uniapp Design

Appearance

Checkbox 复选框 ​

用于在列表中显示复选选项。CheckboxGroup 配合 v-model 管理多个选中项；Checkbox 也可独立使用。单选列表请使用 weui-radio-group 与 weui-radio，以匹配 WeUI 的单选结构和原生互斥行为。

基础用法 ​

Checkbox 独立使用时，通过 v-model:checked 绑定选中状态，点击切换。

选中状态：false

查看代码
vue
<template>
  <weui-checkbox v-model:checked="checked" value="1" label="独立选项" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const checked = ref(false)
</script>

默认选中 ​

通过 v-model:checked 设为 true 实现默认选中。

选中状态：true

查看代码
vue
<template>
  <weui-checkbox v-model:checked="checked" value="1" label="默认选中" />
</template>

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

多选模式 ​

CheckboxGroup 使用 v-model 绑定选中项的 value 数组。

复选列表

选中值：[ "1" ]

查看代码
vue
<template>
  <weui-checkbox-group v-model="checkedValues" title="复选列表">
    <weui-checkbox value="1" label="选项一" />
    <weui-checkbox value="2" label="选项二" />
    <weui-checkbox value="3" label="选项三" />
  </weui-checkbox-group>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const checkedValues = ref(['1'])
</script>

单选列表 ​

单选列表使用独立的 weui-radio-group 与 weui-radio。组件内部使用 radio 语义状态生成官方单选列表样式，并始终只保留一个选中项。

单选列表

选中值：1

查看代码
vue
<template>
  <weui-radio-group v-model="radioValue" title="单选列表">
    <weui-radio value="1" label="选项一" />
    <weui-radio value="2" label="选项二" />
  </weui-radio-group>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const radioValue = ref('1')
</script>

表单型分组 ​

设置 form=true，启用表单型分组样式（圆角卡片外观）。

表单复选
查看代码
vue
<template>
  <weui-checkbox-group v-model="values" form title="表单复选">
    <weui-checkbox value="1" label="选项一" />
    <weui-checkbox value="2" label="选项二" />
  </weui-checkbox-group>
</template>

禁用状态 ​

通过 group 的 disabled 属性禁用全部子项，或在单个 checkbox 上设置 disabled。

禁用示例
查看代码
vue
<template>
  <weui-checkbox-group v-model="values" title="禁用示例">
    <weui-checkbox value="1" label="正常选项" />
    <weui-checkbox value="2" label="禁用选项" disabled />
    <weui-checkbox value="3" label="禁用选项" disabled />
  </weui-checkbox-group>
</template>

自定义内容 ​

通过默认插槽自定义每个选项的内容。

vue
<template>
  <weui-checkbox-group v-model="values" title="自定义内容">
    <weui-checkbox value="1">
      <div>标题文字</div>
      <div class="weui-cell__desc">副标题</div>
    </weui-checkbox>
  </weui-checkbox-group>
</template>

分组底部提示 ​

通过 tips 属性或 #tips slot 在分组底部显示提示文字。

vue
<template>
  <weui-checkbox-group v-model="values" title="复选列表" tips="底部提示文字">
    <weui-checkbox value="1" label="选项一" />
    <weui-checkbox value="2" label="选项二" />
  </weui-checkbox-group>
</template>

Attributes ​

Checkbox ​

参数说明类型默认值
valuecheckbox 标识值string—
label显示文字string''
disabled是否禁用booleanfalse
checked独立使用时的选中状态（v-model:checked）booleanfalse
extClass根元素扩展类名string—

CheckboxGroup ​

参数说明类型默认值
modelValue选中项的 value 数组（v-model）string[][]
disabled是否禁用全部子项booleanfalse
title组标题string—
tips组底部提示文字；#tips 可自定义string—
form是否为表单型组booleanfalse
extClass根元素扩展类名string—
ariaRole根元素 aria-rolestring—

Events ​

Checkbox ​

事件名说明回调参数
update:checked选中状态变化时触发（独立使用）(value: boolean)
change选中状态变化时触发（独立使用）(value: boolean)

CheckboxGroup ​

事件名说明回调参数
update:modelValue选中项变化时触发(value: string[])
change选中项变化时触发(value: string[])

Slots ​

Checkbox ​

插槽名说明备注
default选项内容label prop 为空时启用

CheckboxGroup ​

插槽名说明
title组标题内容，覆盖 title prop
defaultcheckbox 子项
tips底部提示内容，覆盖 tips prop