mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 13:38:56 +08:00
8f7b31cb40
* chore: popover hover 模式下鼠标移上去时不会关闭,新增 popover 独立文档 * 恢复误改的文档示例
4.5 KiB
4.5 KiB
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
PopOver 弹出提示 | 0 | ⚙ 功能 | popover | 60 |
popover 不是一个独立组件,它是嵌入到其它组件中使用的,目前可以在以下组件中配置
- table 的 column
- list 的 column
- static
- cards 里的字段
基本配置
比如在 CRUD 的 tpl 中,可以默认截断显示,然后加上 popOver 来显示全部内容
{
"type": "crud",
"api": "/api/mock2/sample?waitSeconds=1",
"columns": [
{
"type": "tpl",
"name": "engine",
"label": "Rendering engine",
"tpl": "${engine|truncate:6}",
"popOver": "${engine}"
}
]
}
上面的 popOver 精简写法只支持 1.6.5 及以上版本,之前版本需要使用 "popOver": {"body": "$engine"}
在其它组件里的示例
[
{
"type": "form",
"body": [
{
"name": "static",
"type": "static",
"label": "静态展示",
"value": "static",
"popOver": "弹出内容"
}
]
},
{
"type": "service",
"api": "/api/mock2/sample?perPage=5",
"body": [
{
"type": "list",
"source": "$rows",
"listItem": {
"body": [
{
"type": "hbox",
"columns": [
{
"label": "Engine",
"name": "engine",
"popOver": "弹出内容"
}
]
}
]
}
}
]
},
{
"type": "service",
"api": "/api/mock2/sample?perPage=5",
"body": {
"type": "cards",
"source": "$rows",
"card": {
"body": [
{
"label": "Engine",
"name": "engine",
"popOver": "弹出内容"
}
]
}
}
}
]
更多配置
可以配置触发条件,是否显示 icon,title 等,具体请参考后面的配置列表
{
"type": "crud",
"api": "/api/mock2/sample?waitSeconds=1",
"columns": [
{
"type": "tpl",
"name": "engine",
"label": "Rendering engine",
"tpl": "${engine|truncate:6}",
"popOver": {
"trigger": "hover",
"position": "left-top",
"showIcon": false,
"title": "标题",
"body": {
"type": "tpl",
"tpl": "${engine}"
}
}
}
]
}
popOverEnableOn
可以给列上配置popOverEnableOn
属性,该属性为表达式,通过表达式配置当前行是否启动popOver
功能
{
"type": "crud",
"api": "/api/mock2/sample?waitSeconds=1",
"columns": [
{
"name": "id",
"label": "ID",
"popOver": {
"body": {
"type": "tpl",
"tpl": "${id}"
}
},
"popOverEnableOn": "this.id == 1"
},
{
"name": "engine",
"label": "Rendering engine",
"popOver": {
"body": {
"type": "tpl",
"tpl": "${engine}"
}
}
}
]
}
属性列表
-
mode
可配置成popOver
、dialog
或者drawer
。 默认为popOver
。 -
size
当配置成dialog
或者drawer
的时候有用。 -
position
配置弹出位置,只有popOver
模式有用,默认是自适应。 可选参数:center
left-top
right-top
left-bottom
right-bottom
atX-atY-myX-myY 即:对齐目标的位置-对齐自己的位置
left-top-right-bottom
在目标位置的左上角显示。left-center-right-center
在目标的左侧显示,垂直对齐。- ...
固定位置
fixed-center
fixed-left-top
fixed-right-top
fixed-left-bottom
fixed-right-bottom
。
-
offset
默认{top: 0, left: 0}
,如果要来一定的偏移请设置这个。 -
trigger
触发弹出的条件。可配置为click
或者hover
。默认为click
。 -
showIcon
是否显示图标。默认会有个放大形状的图标出现在列里面。如果配置成 false,则触发事件出现在列上就会触发弹出。 -
title
弹出框的标题。 -
body
弹出框的内容。