amis2/docs/zh-CN/components/switch-container.md

title	description	type	group	menuName	icon	order
switch-container 状态容器		0	⚙ 组件	switch-container 容器		50

switch-container 是一种特殊的容器组件，它可以根据动态数据显示条件渲染组件的某一状态。注意容器只会显示最多一种状态，只显示首个命中的状态。容器的不同状态是对应的展示配置，可通过组件搭配与嵌套设计任意展示样式。状态容器的外观与事件动作与容器组件类似，支持常见的外观设置与点击、移入、移出事件动作。

状态容器主要用于编辑器内统一管理复杂组件的多种状态，同时避免因为组件多状态显示而干扰设计。如果只使用 amis 引擎，也可以直接用容器加显示条件实现。

基本用法

{
  "type": "form",
  "title": "",
  "mode": "horizontal",
  "dsType": "api",
  "feat": "Insert",
  "body": [
    {
      "type": "button-group-select",
      "name": "state",
      "label": "切换状态",
      "inline": false,
      "options": [
        {
          "label": "选项1",
          "value": "a"
        },
        {
          "label": "选项2",
          "value": "b"
        }
      ],
      "multiple": false,
      "value": ""
    },
    {
      "type": "switch-container",
      "items": [
        {
          "title": "状态1",
          "body": [
            {
              "type": "tpl",
              "tpl": "状态内容1",
              "wrapperComponent": "",
              "inline": false
            }
          ],
          "visibleOn": "${state == \"a\"}"
        },
        {
          "title": "状态2",
          "body": [
            {
              "type": "tpl",
              "tpl": "状态内容2",
              "wrapperComponent": "",
              "inline": false
            }
          ],
          "visibleOn": "${state == \"b\"}"
        }
      ],
      "style": {
        "position": "static",
        "display": "block"
      }
    }
  ],
  "actions": [],
  "resetAfterSubmit": true
}

style

container 可以通过 style 来设置样式，比如背景色或背景图，注意这里的属性是使用驼峰写法，是 backgroundColor 而不是 background-color。

{
  "type": "switch-container",
  "style": {
      "backgroundColor": "#C4C4C4"
  },
  "items": [
    {
      "title": "状态1",
      "body": [
        {
          "type": "tpl",
          "tpl": "状态内容1",
          "wrapperComponent": "",
          "inline": false
        }
      ]
    }
  ],
}

属性表

属性名	类型	默认值	说明
type	string	"container"	指定为 container 渲染器
className	string		外层 Dom 的类名
style	Object		自定义样式
items	SchemaNode		容器内容

事件表

3.3.0 及以上版本

当前组件会对外派发以下事件，可以通过onEvent来监听这些事件，并通过actions来配置执行的动作，在actions中可以通过${事件参数名}或${event.data.[事件参数名]}来获取事件产生的数据，详细查看事件动作。

事件名称	事件参数	说明
click	-	点击时触发
mouseenter	-	鼠标移入时触发
mouseleave	-	鼠标移出时触发

click

鼠标点击。可以尝试通过${event.context.nativeEvent}获取鼠标事件对象。

{
    "type": "switch-container",
    "items": [
      {
        "title": "状态1",
        "body": [
          {
            "type": "tpl",
            "tpl": "状态内容1",
            "wrapperComponent": "",
            "inline": false
          }
        ]
      }
    ],
    "onEvent": {
        "click": {
            "actions": [
                {
                    "actionType": "toast",
                    "args": {
                        "msgType": "info",
                        "msg": "${event.context.nativeEvent.type}"
                    }
                }
            ]
        }
    }
}

mouseenter

鼠标移入。可以尝试通过${event.context.nativeEvent}获取鼠标事件对象。

{
    "type": "switch-container",
    "items": [
      {
        "title": "状态1",
        "body": [
          {
            "type": "tpl",
            "tpl": "状态内容1",
            "wrapperComponent": "",
            "inline": false
          }
        ]
      }
    ],
    "onEvent": {
        "mouseenter": {
            "actions": [
                {
                    "actionType": "toast",
                    "args": {
                        "msgType": "info",
                        "msg": "${event.context.nativeEvent.type}"
                    }
                }
            ]
        }
    }
}

mouseleave

鼠标移出。可以尝试通过${event.context.nativeEvent}获取鼠标事件对象。

{
    "type": "switch-container",
    "items": [
      {
        "title": "状态1",
        "body": [
          {
            "type": "tpl",
            "tpl": "状态内容1",
            "wrapperComponent": "",
            "inline": false
          }
        ]
      }
    ],
    "onEvent": {
        "mouseleave": {
            "actions": [
                {
                    "actionType": "toast",
                    "args": {
                        "msgType": "info",
                        "msg": "${event.context.nativeEvent.type}"
                    }
                }
            ]
        }
    }
}