amis/docs/components/form/diff-editor.md
2020-07-29 17:33:14 +08:00

2.4 KiB
Executable File

title description type group menuName icon order
DiffEditor 对比编辑器 0 null DiffEditor 对比编辑器 17

基本使用

{
    "type": "form",
    "api": "https://houtai.baidu.com/api/mock2/form/saveForm",
    "controls": [
        {
            "type": "diff-editor",
            "name": "diff",
            "label": "Diff-Editor",
            "diffValue": "hello world",
            "value": "hello"
        }
    ]
}

禁用编辑器

左侧编辑器始终不可编辑,右侧编辑器可以通过设置disableddisabledOn,控制是否禁用

{
    "type": "form",
    "api": "https://houtai.baidu.com/api/mock2/form/saveForm",
    "controls": [
        {
            "type": "diff-editor",
            "name": "diff",
            "label": "Diff-Editor",
            "diffValue": "hello world",
            "value": "hello",
            "disabledOn": "data.isDisabled"
        },
        {
            "type": "switch",
            "name": "isDisabled",
            "label": "是否禁用"
        }
    ]
}

diff 数据域中的两个变量

如下例,左侧编辑器中的值,通过"diffValue": "${value1}"获取,右侧编辑器的值,通过设置"name": "value2",自动映射数据域中value2的值

{
    "type": "form",
    "api": "https://houtai.baidu.com/api/mock2/form/saveForm",
    "data": {
        "value1": "hello world",
        "value2": "hello wrold"
    },
    "controls": [
        {
            "type": "diff-editor",
            "name": "value2",
            "label": "Diff-Editor",
            "diffValue": "${value1}"
        }
    ]
}

属性表

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

属性名 类型 默认值 说明
language string javascript 编辑器高亮的语言,可选 支持的语言
diffValue Tpl 左侧值