表达式

一般来说，属性名类似于xxxOn 或者 className 的配置项，都可以使用表达式进行配置，表达式具有如下的语法：

  1. {
  2.   "type": "tpl",
  3.   "tpl": "当前作用域中变量 show 是 1 的时候才可以看得到我哦~",
  4.   "visibleOn": "this.show === 1"
  5. }

其中：this.show === 1 就是表达式。

表达式语法

表达式语法实际上是 JavaScript 代码，更多 JavaScript 知识查看 这里。

在 amis 的实现过程中，当正则匹配到某个组件存在xxxOn语法的属性名时，会尝试进行下面步骤（以上面配置为例）：

  1. 提取visibleOn配置项配置的 JavaScript 语句this.show === 1，并以当前组件的数据域为这段代码的数据作用域，执行这段 js 代码；
  2. 之后将执行结果赋值给visible并添加到组件属性中
  3. 执行渲染。当前示例中：visible代表着是否显示当前组件；

组件不同的配置项会有不同的效果，请大家在组件文档中多留意。

表达式的执行结果预期应该是boolean类型值，如果不是，amis 会根据 JavaScript 的规则将结果视作boolean类型进行判断

新表达式语法

1.5.0 及以上版本

原来的表达式用的就是原生 js，灵活性虽大，但是安全性不佳，为了与后端公式保持统一，故引入了新的规则，如：${这里是表达式}，也就是说如果开始字符是 ${ 且 } 结尾则认为是新版本的表达式。这个规则与模板中的语法保持一致。

  • ${a == 1} 变量 a 是否和 1 相等
  • ${a % 2} 变量 a 是否为偶数。

表达式中的语法与默认模板中的语法保持一致，所以以下示例直接用模板来方便呈现结果。

  1. {
  2.   "type": "page",
  3.   "data": {
  4.     "a": 1,
  5.     "key": "y",
  6.     "obj": {
  7.       "x": 2,
  8.       "y": 3
  9.     },
  10.     "arr": [1, 2, 3]
  11.   },
  12.   "body": [
  13.     "a is ${a} <br />",
  14.     "a + 1 is ${a + 1} <br />",
  15.     "obj.x is ${obj.x} <br />",
  16.     "obj['x'] is ${obj['x']} <br />",
  17.     "obj[key] is ${obj[key]} <br />",
  18.     "arr[0] is ${arr[0]} <br />",
  19.     "arr[a] is ${arr[a]} <br />",
  20.     "arr[a + 1] is ${arr[a + 1]} <br />"
  21.   ]
  22. }

特殊字符变量名

1.6.1 及以上版本

默认变量名不支持特殊字符比如 ${ xxx.yyy } 意思取 xxx 变量的 yyy 属性，如果变量名就是 xxx.yyy 怎么获取？这个时候需要用到转义语法，如：${ xxx\.yyy }

公式

除了支持简单表达式外，还集成了很多公式(函数)如：

  1. {
  2.   "type": "page",
  3.   "data": {
  4.     "a": "",
  5.     "语文成绩": 81
  6.   },
  7.   "body": [
  8.     "1, 2, 3, 4 的平均数位 ${ AVG(1, 2, 3, 4)}",
  10.     "当前成绩：${IF(语文成绩 > 80, '优秀', '继续努力')}"
  11.   ]
  12. }

!!!include(amis-formula/lib/doc.md)!!!

函数调用示例

  1. {
  2.   "type": "page",
  3.   "body": [
  4.     {
  5.       "type": "form",
  6.       "wrapWithPanel": false,
  7.       "body": [
  8.         {
  9.           "type": "static",
  10.           "label": "IF(true, 2, 3)",
  11.           "tpl": "${IF(true, 2, 3)}"
  12.         },
  13.         {
  14.           "type": "static",
  15.           "label": "MAX(1, -1, 2, 3, 5, -9)",
  16.           "tpl": "${MAX(1, -1, 2, 3, 5, -9)}"
  17.         },
  18.         {
  19.           "type": "static",
  20.           "label": "ROUND(3.5)",
  21.           "tpl": "${ROUND(3.5)}"
  22.         },
  23.         {
  24.           "type": "static",
  25.           "label": "AVG(4, 6, 10, 10, 10)",
  26.           "tpl": "${AVG(4, 6, 10, 10, 10)}"
  27.         },
  28.         {
  29.           "type": "static",
  30.           "label": "UPPERMONEY(7682.01)",
  31.           "tpl": "${UPPERMONEY(7682.01)}"
  32.         },
  33.         {
  34.           "type": "static",
  35.           "label": "TIMESTAMP(DATE(2021, 11, 21, 0, 0, 0), 'x')",
  36.           "tpl": "${TIMESTAMP(DATE(2021, 11, 21, 0, 0, 0), 'x')}"
  37.         },
  38.         {
  39.           "type": "static",
  40.           "label": "DATETOSTR(NOW(), 'YYYY-MM-DD')",
  41.           "tpl": "${DATETOSTR(NOW(), 'YYYY-MM-DD')}"
  42.         }
  43.       ]
  44.     }
  45.   ]
  46. }