amis/docs/zh-CN/components/page.md
2021-09-24 13:27:25 +08:00

7.7 KiB
Executable File
Raw Blame History

title description type group menuName icon order
Page 页面 0 ⚙ 组件 Page 页面 23

Page 组件是 amis 页面 JSON 配置中顶级容器组件,是整个页面配置的入口组件。

基本用法

我们这里在内容区中简单渲染一段文字。

{
  "type": "page",
  "title": "标题",
  "body": "Hello World!"
}

渲染组件

内容区同样可以渲染各种组件,这里我们渲染一个表单。

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "body": [
      {
        "type": "input-text",
        "name": "name",
        "label": "姓名:"
      }
    ]
}

在其他区域渲染组件

Page 默认将页面分为几个区域,分别是内容区(body侧边栏(aside工具栏(toolbar)部分,你可以在这些区域配置你想要的组件和内容。

{
  "type": "page",
  "aside": [
    {
      "type": "tpl",
      "tpl": "这是侧边栏部分"
    }
  ],
  "toolbar": [
    {
      "type": "tpl",
      "tpl": "这是工具栏部分"
    }
  ],
  "body": [
    {
      "type": "tpl",
      "tpl": "这是内容区"
    }
  ]
}

不同区域都是Page的子节点,也就是说都可以使用Page下数据作用域。

页面初始化请求

通过配置initApi,可以在初始化页面时请求所配置的接口。

{
  "type": "page",
  "initApi": "/api/mock2/page/initData",
  "body": [
    {
      "type": "tpl",
      "tpl": "当前时间是:${date}"
    }
  ]
}

具体 API 规范查看 API 文档

轮询初始化接口

想要在页面渲染后,轮询请求初始化接口,步骤如下:

  1. 配置 initApi
  2. 配置 interval单位为毫秒最小 1000。
{
  "type": "page",
  "initApi": "/api/mock2/page/initData",
  "interval": 3000,
  "body": [
    {
      "type": "tpl",
      "tpl": "当前时间是:${date}"
    }
  ]
}

如果希望在满足某个条件的情况下停止轮询,配置stopAutoRefreshWhen表达式。

{
  "type": "page",
  "initApi": "/api/mock2/page/initData",
  "stopAutoRefreshWhen": "this.time % 5", // 当时间戳能被5整除时停止轮询
  "interval": 3000,
  "body": [
    {
      "type": "tpl",
      "tpl": "当前时间戳是:${date}"
    }
  ]
}

CSS 变量

通过设置 CSS 变量几乎可以修改 amis 中任意组件的展现,具体细节请参考样式

{
  "type": "page",
  "cssVars": {
    "--text-color": "#108cee"
  },
  "body": {
    "type": "form",
    "body": [
      {
        "type": "input-text",
        "label": "文本框",
        "name": "text"
      }
    ]
  }
}

自定义 CSS

1.3.0 及以上版本

虽然 amis 提供了很多内置样式,但想要更精细控制样式,最好的方式依然是编写自定义 CSS在之前的版本中需要外部页面配合从 1.3.0 开始 amis 可以直接在配置中支持自定义 CSS

{
  "type": "page",
  "css": {
    ".myClass": {
      "color": "blue"
    }
  },
  "body": {
    "type": "tpl",
    "tpl": "文本",
    "className": "myClass"
  }
}

上面的配置会自动创建一个 <style> 标签,其中内容就是:

.myClass {
  color: blue;
}

配置写法和编写普通 css 的体验是一致的,可以使用任意 css 选择符及属性。

属性表

属性名 类型 默认值 说明
type string "page" 指定为 Page 组件
title SchemaNode 页面标题
subTitle SchemaNode 页面副标题
remark Remark 标题附近会出现一个提示图标,鼠标放上去会提示该内容。
aside SchemaNode 往页面的边栏区域加内容
toolbar SchemaNode 往页面的右上角加内容,需要注意的是,当有 title 时,该区域在右上角,没有时该区域在顶部
body SchemaNode 往页面的内容区域加内容
className string 外层 dom 类名
cssVars object 自定义 CSS 变量,请参考样式
toolbarClassName string v-middle wrapper text-right bg-light b-b Toolbar dom 类名
bodyClassName string wrapper Body dom 类名
asideClassName string w page-aside-region bg-auto Aside dom 类名
headerClassName string bg-light b-b wrapper Header 区域 dom 类名
initApi API Page 用来获取初始数据的 api。返回的数据可以整个 page 级别使用。
initFetch boolean true 是否起始拉取 initApi
initFetchOn 表达式 是否起始拉取 initApi, 通过表达式配置
interval number 3000 刷新时间(最小 1000)
silentPolling boolean false 配置刷新时是否显示加载动画
stopAutoRefreshWhen 表达式 "" 通过表达式来配置停止刷新的条件