# Checkbox 复选框

概述

Checkbox 多项选择器,需结合fui-checkbox-group和fui-checkbox组件一起使用。组件中还使用了fui-form-field组件,需要同时引入进项目中。

# 引入

以下介绍两种常用的引入方式。
第一种:在页面json文件中引入
{
  "navigationBarTitleText": "复选框",
  "usingComponents": {
    "fui-checkbox-group":"/components/firstui/fui-checkbox-group/fui-checkbox-group",
    "fui-checkbox":"/components/firstui/fui-checkbox/fui-checkbox"
  }
}
1
2
3
4
5
6
7
第二种:在根目录app.json文件中全局引入
"usingComponents": {
   "fui-checkbox-group":"components/firstui/fui-checkbox-group/fui-checkbox-group",
   "fui-checkbox":"components/firstui/fui-checkbox/fui-checkbox"
  }
1
2
3
4

# 代码演示

部分示例演示,完整使用请参考示例程序以及文档API。
基本使用

可通过model:value直接获取选中的值,也可通过change事件来获取。

 <fui-checkbox-group name="checkbox" model:value="{{vals}}" bindchange="change">
      <view class="fui-list__item">
        <fui-label>
          <view class="fui-align__center">
            <fui-checkbox value="1"></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

# Slots

# fui-checkbox-group 组件

插槽名称 说明
default 标签显示内容,内部由多个fui-checkbox组成

# fui-checkbox 组件

插槽名称 说明
- -

# fui-form-field 组件

该组件主要用于表单传递数据。

插槽名称 说明
default 标签内显示内容,内部由多个fui-checkbox组成

# Props

# fui-checkbox-group 组件

属性名 类型 说明 默认值 其他说明
name String 多项选择器名称 - -
value String 选中的value值,用于双向绑定 [] 双向绑定回传数据仅支持字符串类型,此处回传的为JSON字符串,需要自行转化为JSON数据

# fui-checkbox 组件

属性名 类型 说明 默认值 其他说明
value String value值,当选中时会携带该值 - -
checked Boolean 是否选中 false -
disabled Boolean 是否禁用 false -
color String 选中时背景颜色 - 如果值为空,可以通过css变量(--fui-color-primary)修改默认颜色值
borderColor String 未选中时边框颜色 #ccc -
borderRadius String 圆角值 50% -
isCheckMark Boolean 是否只展示对号,无边框背景 false -
checkMarkColor String 对号颜色 #fff -
scaleRatio Number, String 缩放比例 1 -

# fui-form-field 组件

属性名 类型 说明 默认值 其他说明
hidden Boolean 是否为隐藏域 false -

# Events

# fui-checkbox-group 组件

事件名 说明 回调参数
bind:change 选中项发生变化时触发 event.detail = {
  value
}

# fui-checkbox 组件

温馨提示:fui-checkbox组件可独立使用。

事件名 说明 回调参数
bind:change 选中状态发生改变时触发 event.detail = {
  value,
  checked
}

示例预览

Last Updated: 1/10/2024, 6:38:06 PM