PopOver 弹出提示

popover 不是一个独立组件，它是嵌入到其它组件中使用的，目前可以在以下组件中配置

  • table 的 column
  • list 的 column
  • static
  • cards 里的字段

基本配置

比如在 CRUD 的 tpl 中，可以默认截断显示，然后加上 popOver 来显示全部内容

```schema: scope=”body” { “type”: “crud”, “api”: “/api/mock2/sample?waitSeconds=1”, “columns”: [ { “type”: “tpl”, “name”: “engine”, “label”: “Rendering engine”, “tpl”: “${engine|truncate:6}”, “popOver”: “${engine}” } ] }

  2. > 上面的 popOver 精简写法只支持 1.6.5 及以上版本，之前版本需要使用 "popOver": {"body": "$engine"}
  4. ## 在其它组件里的示例
  6. ```schema: scope="body"
  7. [
  8.   {
  9.     "type": "form",
  10.     "body": [
  11.       {
  12.         "name": "static",
  13.         "type": "static",
  14.         "label": "静态展示",
  15.         "value": "static",
  16.         "popOver": "弹出内容"
  17.       }
  18.     ]
  19.   },
  20.   {
  21.     "type": "service",
  22.     "api": "/api/mock2/sample?perPage=5",
  23.     "body": [
  24.       {
  25.         "type": "list",
  26.         "source": "$rows",
  27.         "listItem": {
  28.           "body": [
  29.             {
  30.               "type": "hbox",
  31.               "columns": [
  32.                 {
  33.                   "label": "Engine",
  34.                   "name": "engine",
  35.                   "popOver": "弹出内容"
  36.                 }
  37.               ]
  38.             }
  39.           ]
  40.         }
  41.       }
  42.     ]
  43.   },
  44.   {
  45.     "type": "service",
  46.     "api": "/api/mock2/sample?perPage=5",
  47.     "body": {
  48.       "type": "cards",
  49.       "source": "$rows",
  50.       "card": {
  51.         "body": [
  52.           {
  53.             "label": "Engine",
  54.             "name": "engine",
  55.             "popOver": "弹出内容"
  56.           }
  57.         ]
  58.       }
  59.     }
  60.   }
  61. ]

更多配置

可以配置触发条件，是否显示 icon，title 等，具体请参考后面的配置列表

```schema: scope=”body” { “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}” } } } ] }

  2. ## popOverEnableOn
  4. 可以给列上配置`popOverEnableOn`属性，该属性为[表达式](../../docs/concepts/expression)，通过[表达式](../../docs/concepts/expression)配置当前行是否启动`popOver`功能
  6. ```schema: scope="body"
  7. {
  8.     "type": "crud",
  9.     "api": "/api/mock2/sample?waitSeconds=1",
  10.     "columns": [
  11.         {
  12.             "name": "id",
  13.             "label": "ID",
  14.             "popOver": {
  15.                 "body": {
  16.                     "type": "tpl",
  17.                     "tpl": "${id}"
  18.                 }
  19.             },
  20.             "popOverEnableOn": "this.id == 1"
  21.         },
  22.         {
  23.             "name": "engine",
  24.             "label": "Rendering engine",
  25.             "popOver": {
  26.                 "body": {
  27.                     "type": "tpl",
  28.                     "tpl": "${engine}"
  29.                 }
  30.             }
  31.         }
  32.     ]
  33. }

属性列表

  • 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 弹出框的内容。