# Checkbox 复选框
概述
Checkbox 多项选择器，需结合fui-checkbox-group和fui-checkbox组件一起使用。微信、百度、QQ小程序中还使用了fui-form-field组件（如果未使用easycom组件规范，请在fui-checkbox-group组件中手动引入、注册该组件）。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
注意：使用这种方式引入，请务必在fui-checkbox-group组件中手动引入、注册fui-form-field组件。
import fuiCheckboxGroup from "@/components/firstui/fui-checkbox-group/fui-checkbox-group.vue"
import fuiCheckbox from "@/components/firstui/fui-checkbox/fui-checkbox.vue"
export default {
components:{
fuiCheckboxGroup,
fuiCheckbox
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
基本使用
可通过v-model直接获取选中的值，也可通过change事件来获取。
<fui-checkbox-group name="checkbox" v-model="vals" @change="change">
<view class="fui-list__item">
<fui-label>
<view class="fui-align__center">
<fui-checkbox value="1" checked></fui-checkbox>
<text class="fui-text">选中</text>
</view>
</fui-label>
<fui-label :margin="['0','0','0','40rpx']">
<view class="fui-align__center">
<fui-checkbox value="2"></fui-checkbox>
<text class="fui-text">未选中</text>
</view>
</fui-label>
</view>
</fui-checkbox-group>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Slots
# fui-checkbox-group 组件
| 插槽名称 | 说明 |
|---|---|
| default | 标签显示内容，内部由多个fui-checkbox组成 |
# fui-checkbox 组件
| 插槽名称 | 说明 |
|---|---|
| - | - |
# fui-form-field 组件
该组件主要用于表单传递数据，仅微信、百度、QQ小程序端使用。
| 插槽名称 | 说明 |
|---|---|
| default | 标签内显示内容，内部由多个fui-checkbox组成 |
# Props
# fui-checkbox-group 组件
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| name | String | 多项选择器名称 | - | - |
| value | Array | 选中的value值，用于双向绑定，vue2使用 | [ ] | - |
| modelValue | Array | 选中的value值，用于双向绑定，vue3使用 | [ ] | - |
# fui-checkbox 组件
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| value | String | value值，当选中时会携带该值 | - | - |
| checked | Boolean | 是否选中 | false | - |
| disabled | Boolean | 是否禁用 | false | - |
| color | String | 选中时背景颜色 | #465CFF | 非Nvue端默认为空，可以通过css变量（--fui-color-primary）修改默认颜色值 |
| borderColor | String | 未选中时边框颜色 | #ccc | - |
| borderRadius | String | 圆角值 | nvue：40rpx，非nvue：50% | nvue只能传入具体值，不可使用百分比 |
| isCheckMark | Boolean | 是否只展示对号，无边框背景 | false | - |
| checkMarkColor | String | 对号颜色 | #fff | - |
| scaleRatio | Number, String | 缩放比例 | 1 | - |
# fui-form-field 组件
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| hidden | Boolean | 是否为隐藏域 | false | 微信、百度、QQ小程序 |
# Events
# fui-checkbox-group 组件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @change | 选中项发生变化时触发 | event.detail = { value } |
| @input vue2 | 用于组件双向绑定，使用v-model指令即可 | value |
| @update:modelValue vue3 | 用于组件双向绑定，使用v-model指令即可 | modelValue |
# fui-checkbox 组件
温馨提示：fui-checkbox组件可独立使用。
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @change | 选中状态发生改变时触发 | event.detail = { value, checked } |
Checkbox 复选框