amis2/docs/zh-CN/components/form/checkbox.md
liaoxuezhi e9f2e3a67f
feat: 添加 json-schema 渲染器 (#4269)
* feat: 添加 json-schema 渲染器

* draft: 组件层添加 form 逻辑

* 补充组件form相关逻辑

* json-schema-editor 组件内部实现调整

* 添加 json-schema 渲染器

* 补充外部 value 变化更新成员的逻辑

* 补充外部 value 变化更新成员的逻辑

* 优化 json-schema 交互

* 修改 snapshot

* 可能死循环

* 补充文档

* 优化逻辑

* 具备远程获取能力

* 固定值优化
2022-05-10 23:35:56 +08:00

3.0 KiB
Executable File
Raw Blame History

title description type group menuName icon order
Checkbox 勾选框 0 null Checkbox 8

用于实现勾选,功能和 Switch 类似,只是展现上不同。

基本用法

{
    "type": "form",
    "body": [
        {
            "name": "checkbox",
            "type": "checkbox",
            "label": "勾选框",
            "option": "选项说明"
        }
    ]
}

配置真假值

默认情况:

  • 勾选框勾选时表单项值为true
  • 勾选框取消勾选时表单项值为false
{
    "type": "form",
    "debug": true,
    "body": [
        {
            "name": "checkbox",
            "type": "checkbox",
            "label": "勾选框"
        }
    ]
}

如果你想调整这个值,可以配置trueValuefalseValue

{
    "type": "form",
    "debug": true,
    "body": [
        {
            "name": "checkbox",
            "type": "checkbox",
            "label": "勾选框",
            "trueValue": 1,
            "falseValue": 0
        }
    ]
}

勾选上例中的勾选框,观察数据域变化,会发现勾选后值为1,而取消勾选后为0

按钮模式

{
    "type": "form",
    "debug": true,
    "body": [
        {
            "name": "checkbox",
            "type": "checkbox",
            "label": "勾选框",
            "trueValue": true,
            "falseValue": false,
            "optionType": "button",
            "option": "选项说明",
            "value": true
        }
    ]
}

属性表

除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置

属性名 类型 默认值 说明
option string 选项说明
trueValue stringnumberboolean true 标识真值
falseValue stringnumberboolean false 标识假值
optionType defaultbutton default 设置 option 类型

事件表

事件名称 事件参数 说明
change value: boolean 选中状态 选中状态发生变化时触发

动作表

动作名称 动作配置 说明
clear - 清空
reset - 将值重置为resetValue,若没有配置resetValue,则清空
setValue value: string |number |boolean 更新的值 更新数据