mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-15 09:21:13 +08:00
4.0 KiB
Executable File
4.0 KiB
Executable File
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
Container 容器 | 0 | ⚙ 组件 | Container 容器 | 38 |
Container 是一种容器组件,它可以渲染其他 amis 组件。
注意 Container 组件因为历史原因多了一层 div,推荐使用 wrapper 来作为容器。
基本用法
{
"type": "container",
"body": "这里是容器内容区"
}
style
container 可以通过 style 来设置样式,比如背景色或背景图,注意这里的属性是使用驼峰写法,是 backgroundColor
而不是 background-color
。
{
"type": "container",
"style": {
"backgroundColor": "#C4C4C4"
},
"body": "这里是容器内容区"
}
wrapperComponent
修改标签名可以让容器使用其它标签渲染,比如 pre
{
"type": "container",
"wrapperComponent": "pre",
"body": "var a = 1;"
}
属性表
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | string |
"container" |
指定为 container 渲染器 |
className | string |
外层 Dom 的类名 | |
bodyClassName | string |
容器内容区的类名 | |
wrapperComponent | string |
"div" |
容器标签名 |
style | Object |
自定义样式 | |
body | SchemaNode | 容器内容 |
事件表
3.3.0 及以上版本
当前组件会对外派发以下事件,可以通过onEvent
来监听这些事件,并通过actions
来配置执行的动作,在actions
中可以通过${事件参数名}
或${event.data.[事件参数名]}
来获取事件产生的数据,详细查看事件动作。
事件名称 | 事件参数 | 说明 |
---|---|---|
click | - | 点击时触发 |
mouseenter | - | 鼠标移入时触发 |
mouseleave | - | 鼠标移出时触发 |
click
鼠标点击。可以尝试通过${event.context.nativeEvent}
获取鼠标事件对象。
{
"type": "container",
"body": "这里是容器内容区",
"onEvent": {
"click": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "${event.context.nativeEvent.type}"
}
}
]
}
}
}
mouseenter
鼠标移入。可以尝试通过${event.context.nativeEvent}
获取鼠标事件对象。
{
"type": "container",
"body": "这里是容器内容区",
"onEvent": {
"mouseenter": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "${event.context.nativeEvent.type}"
}
}
]
}
}
}
mouseleave
鼠标移出。可以尝试通过${event.context.nativeEvent}
获取鼠标事件对象。
{
"type": "container",
"body": "这里是容器内容区",
"onEvent": {
"mouseleave": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "${event.context.nativeEvent.type}"
}
}
]
}
}
}