工作中用到的amis组件以及使用方法_amis 添加自定义代码

基础介绍

为什么要用amis？

因为公司叫我用

  emmm，但用下来发现真的很好用，百度之前也在用这个框架搭页面，搭了7，8年了，没出过bug，而且使用简单，我只是有1，2年的工作经验，用着很舒服，就算没有工作经验，上手也快的

  至于amis的包的引用以及安装，可以去看官网，这里就展示常见的组件以及主要使用的属性字段

 amis版本的hello world！

{
  "type": "page",
  "body": "hello world!"
}

以上的代码就能生成一个页面，并且body部分就会生成一句话，hello world！

  type 这个字段非常重要，指明了我需要渲染的是什么组件，我一般都放第一句，如果不放的话会报错

  body 字段也是非常重要的，表明了，这个组件的组成部分是什么，可以嵌套，一般是直接跟{},也可以跟[{},{}]，例如下面的例子

 代码一

{
  "type": "page",//指定组件类型
  "body": {
    "type": "form",//指定为form表单
    "title": "我是标题",//表单的标题
    "mode": "horizontal",//表单的展开模式，此为横向，纵向为normal
    "columnCount": 2,//表单项占的列数
    "actions": [//表单的底部按钮的集合，代码二会展示多个按钮怎么写
      {
        "type": "button",//组件类型为按钮
        "label": "登录",//按钮文字
        "level": "primary"//按钮类型，此为蓝色，还有其它的例如danger，info，success等
      }
    ],
    "body":{
      "type": "input-text",//表单的主题内容，此组件为input的文字输入框
      "label": "姓名：",//input输入框的标题
      "placeholder": "请填写姓名"//input输入框没有内容时的占位符
    }
  }
}

效果一：

代码二

{
  "type": "page",
  "body": {
    "type": "form",
    "title": "我是标题",
    "mode": "horizontal",
    "columnCount": 2,
    "actions": [
      {
        "type": "button",
        "label": "登录",
        "level": "primary"
      },
      {
        "type": "button",
        "label": "退出",
        "level": "danger"
      }
    ],
    "body": [
      {
        "type": "input-text",
        "label": "姓名：",
        "placeholder": "请填写姓名"
      },
      {
        "type": "input-password",
        "label": "密码：",
        "placeholder": "请输入密码"
      }
    ]
  }
}

效果二：

数据域的初始化

怎么通过接口获取数据呢？获取之后怎么渲染在页面上呢？

添加初始化接口,使用${}取值语法渲染

 "initApi": {
             "url": "news_preserve_list"
               }

取得的接口数据如下 

{
  "total": 11,
  "items": [
    {
      "remark": "2222",
      "enable": true,
      "type": "煤机新闻",
      "title": "12",
      "objectId": "65698e3a6aa58e39d93a8071",
      "createdAt": "2023-12-01 15:41:46",
      "updatedAt": "2023-12-01T07:41:46.442Z"
    },
    {
      "remark": "8",
      "enable": true,
      "type": "商务公告",
      "title": "8",
      "objectId": "65698e076aa58e39d93a7fb7",
      "createdAt": "2023-12-01 15:40:55",
      "updatedAt": "2023-12-01T07:40:55.351Z"
    },
    {
      "remark": "备注7",
      "enable": true,
      "type": "煤机新闻",
      "title": "我是标题7",
      "objectId": "65698df16aa58e39d93a7f5d",
      "createdAt": "2023-12-01 15:40:33",
      "updatedAt": "2023-12-01T07:40:33.779Z"
    }
  ]
}

  如果是crud组件的话，可以使用name自动获取数据，如果不是的话，可以使用${}取值，给大家举一个稍微完整点的例子

{
  "type": "crud",//组件类型为crud
  "syncLocation": false,//是否将过滤条件的参数同步到地址栏上
  "footerToolbar": [//页脚的按钮
    "switch-per-page",//选择每页的页数
    "pagination"//分页器
  ],
  "api": {
    "url": "/CustomApi/get_api_data?api_key=news_preserve_list",//接口地址
    "method": "post",//请求方式
    "data": {
      "&": "$$"//携带的数据，这里是全部携带的意思
    }
  },
  "filter": {//过滤器，可以实现条件搜索
    "title": "条件搜索",//标题
    "columnCount": 2,//分成几列
    "mode": "horizontal",//横向展开模式
    "size": "md",//大小为中等
    "body": [
      {
        "type": "input-text",
        "label": "标题",
        "name": "title"
      }
    ]
  },
  "columns": [//每一列的表头，name属性很重要，可以自动去寻找数组的对象里面的属性值并且自动填上，每行数据都自动生成一个objectId，点击编辑或者详情或者删除的时候，会自动拿到，就要把这个objectId传过去，后端才知道要操作哪一行数据
    {
      "name": "title",
      "label": "标题",
      "width": "20%"
    },
    {
      "name": "type",
      "label": "类别",
      "width": "20%"
    },
    {
      "name": "remark",
      "label": "备注",
      "width": "30%"
    },
    {
      "type": "operation",//关于操作这行数据的按钮，都写在这里
      "label": "操作",
      "width": "30%",
      "buttons": [
        {
          "label": "编辑",
          "type": "button",
          "level": "default",
          "actionType": "dialog",//这行意思为点击的时候会打开一个弹出框
          "disabled": false,
          "dialog": {//之后就是设置该弹出框的内容
            "title": "编辑",
            "size": "lg",
            "body": [
              {
                "'$ref'": "news",//设置内容为前面自定义的组件，写在definitions里面，该例子没有，只是列举该写法，news为自定义组件的名字
                "debug": false,//是否启用调试模式，这个可以查看数据接收或者发送的时候长什么样子
                "api": {
                  "url": "/CustomApi/get_api_data?api_key=news_preserve_edit",
                  "method": "post",
                  "data": {
                    "objectId": "$objectId"
                  }
                }
              }
            ]
          }
        },
        {
          "label": "删除",
          "type": "button",
          "level": "danger",
          "confirmText": "确定删除吗？",
          "actionType": "ajax",
          "api": {
            "url": "/CustomApi/get_api_data?api_key=news_preserve_delete",
            "method": "post",
            "data": {
              "objectId": "$objectId"
            }
          }
        }
      ]
    }
  ]
}

组件的使用

  学会了怎么使用组件了，接下来就来学习比较常见的组件，使用方法如出一辙，主要是要去看对应的属性表，要看仔细！

panel

描述

可以把相关信息以面板的形式展示到一块

示例代码

{
  "type": "page",
  "body": {
    "type": "panel",
    "title": "面板标题",
    "body": "面板内容"
  }
}

效果

补充

 可以嵌套其它组件，放在body内

 嵌套其它组件的代码

{
  "type": "page",
  "data": {
    "dataOne": [
      {
        "name": "比尔盖茨",
        "height": "170",
        "age": "32",
        "weight": "50kg",
        "files": []
      },
      {
        "name": "乔布斯",
        "height": "180",
        "age": "68",
        "weight": "60kg",
        "files": []
      }
    ]
  },
  "body": [
    {
      "type": "page",
      "body": {
        "type": "panel",
        "title": "面板标题",
        "body": [
          {
            "type": "property",
            "column": 2,
            "title": "富商信息",
            "items": [
              {
                "label": "姓名",
                "content": "比尔盖茨"
              },
              {
                "label": "身高",
                "content": "180"
              },
              {
                "label": "年龄",
                "content": "68"
              },
              {
                "label": "体重",
                "content": "75kg"
              },
              {
                "label": "附件",
                "content": {
                  "type": "input-file"
                },
                "span": 2
              }
            ]
          },
          {
            "type": "input-table",
            "title": "机器配置",
            "name": "dataOne",
            "columns": [
              {
                "label": "姓名",
                "name": "name"
              },
              {
                "label": "身高",
                "name": "height"
              },
              {
                "label": "年龄",
                "name": "age"
              },
              {
                "label": "体重",
                "name": "weight"
              },
              {
                "label": "附件",
                "name": "files",
                "type": "input-file"
              }
            ]
          }
        ]
      }
    }
  ]
}//看着代码比较多，实际结构很简单，就是把panel里面的body替换成了上面一个property属性表，下面一个input-table表

 效果图

panel的属性表

tabs

描述

选项卡容器组件

示例代码

{
  "type": "page",
  "body": {
    "type": "tabs",
    "swipeable": true,
    "tabs": [
      {
        "title": "Tab 1",
        "tab": "Content 1"
      },
      {
        "title": "Tab 2",
        "tab": "Content 2"
      }
    ]
  }
}

效果

tabs的属性表

wrapper

描述

简单的一个包裹容器组件，相当于用 div 包含起来，最大的用处是用来配合 css 进行布局

示例代码

{
  "type": "page",
  "body": {
    "type": "wrapper",
    "body": "内容",
    "className": "b"
  }
}

效果

wrapper的属性表

action

描述

Action 行为按钮，是触发页面行为的主要方法之一

示例代码

{
  "type": "page",
  "body": {
    "label": "弹框",
    "type": "button",
    "actionType": "dialog",
    "dialog": {
      "title": "弹框",
      "body": "这是个简单的弹框。"
    }
  }
}

效果

点击按钮之后

action的属性表

form

描述

表单是 amis 中核心组件之一，主要作用是提交或者展示表单数据

示例代码

{
  "type": "page",
  "body": {
    "type": "form",
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "type": "input-text",
        "name": "name",
        "label": "姓名："
      },
      {
        "name": "email",
        "type": "input-email",
        "label": "邮箱："
      }
    ]
  }
}

效果

form的属性表

select

描述

下拉框选择器

示例代码

{
  "type": "page",
  "body": {
    "type": "form",
    "body": [
      {
        "label": "选项",
        "type": "select",
        "name": "select",
        "menuTpl": "<div>${label} 值：${value}, 当前是否选中: ${checked}</div>",
        "options": [
          {
            "label": "A",
            "value": "a"
          },
          {
            "label": "B",
            "value": "b"
          },
          {
            "label": "C",
            "value": "c"
          }
        ]
      }
    ]
  }
}

效果

图一

图二

select的属性表

input

描述

  一类功能很全的输入框组件，可以有很多功能（还有很多使用的组件同学们可自行去官网查看使用嗷）

input-text

描述

常用于输入用户信息，或填写资料等，表单里不可或缺的表单项

示例代码

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

效果

input-text的属性表

input-number

描述

  跟input-text效果差不多，但是顾名思义，只能用来接收数字型的数据，可以设置最大最小值和步长，步长就是每次变化的度

示例代码

{
  "type": "page",
  "body": {
    "type": "form",
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "type": "input-number",
        "name": "number",
        "label": "数字"
      }
    ]
  }
}

效果

input-number的属性表

input-city

描述

  这个组件目前我没用过，但是看了一眼示例，真的很简单，vue的话你想实现真的很麻烦，原生要写很多代码，你还得去找省份城市的数据，elementUi甚至没有这个组件，amis你直接调用就行了

示例代码

{
  "type": "page",
  "body": {
    "type": "form",
    "debug": true,
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "name": "city",
        "type": "input-city",
        "label": "城市",
        "searchable": true
      }
    ]
  }
}

效果

注意，存储的值为该地的位置邮编

input-city属性表

input-date

描述

很常见的选择日期的组件

示例代码

{
  "type": "page",
  "body": {
    "type": "form",
    "debug": true,
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "type": "input-date",
        "name": "date",
        "label": "日期",
        "style": {
          "width": "200px"
        }
      }
    ]
  }
}

效果

  保存的值为时间戳，若要更改值格式可使用format属性，设置为:"YYYY-MM-DD，若要更改展示格式则使用inputFormat属性，设置为:"YYYY-MM-DD"，更多请查看moment官方文档

input-date的属性表

input-datetime

描述

保存更详细的时间的组件

示例代码

{
  "type": "page",
  "body": {
    "type": "form",
    "debug": true,
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "type": "input-datetime",
        "name": "datetime",
        "label": "日期时间"
      }
    ]
  }
}

效果

 保存的值为时间戳，若要更改值格式可使用format属性，设置为:"YYYY-MM-DD，若要更改展示格式则使用inputFormat属性，设置为:"YYYY-MM-DD"，更多请查看

moment官方文档

input-datetime的属性表

input-excel

描述

  这个组件是通过前端对 Excel 进行解析，将结果作为表单项，使用它有两个好处：

  节省后端开发成本，无需再次解析 Excel

  可以前端实时预览效果，比如配合 input-table或者picker 组件进行二次修改

示例代码

{
  "type": "page",
  "body": {
    "type": "form",
    "debug": true,
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "type": "input-excel",
        "name": "excel",
        "label": "上传 Excel",
        "placeholder": "请拖拽Excel文件到当前区域"
      },
      {
        "type": "input-table",
        "name": "excel",
        "visibleOn": "data.excel",
        "columns": [
          {
            "name": "item_no",
            "label": "物料号",
            "type": "input-text"
          },
          {
            "name": "item_note",
            "label": "物料",
            "type": "input-text"
          },
          {
            "name": "item_material",
            "label": "规格",
            "type": "input-text"
          },
          {
            "name": "graph_no",
            "label": "图号",
            "type": "input-text"
          },
          {
            "name": "required_qty",
            "label": "需求数量",
            "type": "input-text"
          }
        ]
      }
    ]
  }
}

文件截图

效果

建议设置form表单的debug为true，可以看到待发送的数据结构

input-excel的属性表

input-file

描述

  用来负责文件上传，文件上传成功后会返回文件地址，这个文件地址会作为这个表单项的值，整个表单提交的时候，其实提交的是文件地址，文件上传已经在这个控件中完成了

示例代码

{
  "type": "page",
  "body": {
    "type": "form",
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "type": "input-file",
        "name": "file",
        "label": "File",
        "accept": "*",
        "receiver": "/amis/api/upload/file"
      }
    ]
  }
}

效果

input-file的属性表

input-password

描述

输入密码组件，可配置是否显示密码

示例代码

{
  "type": "page",
  "body": {
    "type": "form",
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "type": "input-password",
        "name": "password",
        "label": "密码"
      }
    ]
  }
}

效果

input-password的属性表

inputRichText

描述

  这个也是很好用，我最近做的一个功能就是用这个做的，可以做到让用户自己编辑文章，可以插入图片，表格，超链接等等，最后保存为string就行了，然后解析渲染的时候设置type为html

示例代码

{
  "type": "page",
  "body": {
    "type": "form",
    "debug": true,
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "type": "input-rich-text",
        "name": "rich",
        "label": "Rich Text"
      }
    ]
  }
}

效果

inputRichText的属性表

input-table

描述

  可以用来展示数组类型的数据。配置columns 数组，来定义列信息

  注意，input-table的外层不能是panel，这是我测试过的，如果有误，请同学们自行测试

示例代码

{
  "type": "page",
  "body": {
    "type": "form",
    "debug": true,
    "data": {
      "table": [
        {
          "a": "a1",
          "b": "b1",
          "c": "c1"
        }
      ]
    },
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "type": "input-table",
        "name": "table",
        "columns": [
          {
            "name": "a",
            "label": "A"
          },
          {
            "name": "b",
            "label": "B"
          },
          {
            "name": "c",
            "label": "C",
            "type": "input-text"
          }
        ]
      }
    ]
  }
}

效果

input-table的属性表

picker

描述

列表选取，在功能上和 Select 类似，但它能显示更复杂的信息

示例代码

{
  "type": "page",
  "body": {
    "type": "form",
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "type": "picker",
        "name": "type4",
        "joinValues": true,
        "valueField": "id",
        "labelField": "engine",
        "label": "Picker",
        "embed": true,
        "source": "/amis/api/mock2/crud/tree?waitSeconds=1",
        "size": "lg",
        "value": "4,5",
        "multiple": true,
        "pickerSchema": {
          "mode": "table",
          "name": "thelist",
          "quickSaveApi": "/amis/api/mock2/sample/bulkUpdate",
          "quickSaveItemApi": "/amis/api/mock2/sample/$id",
          "draggable": true,
          "headerToolbar": {
            "wrapWithPanel": false,
            "type": "form",
            "className": "text-right",
            "target": "thelist",
            "mode": "inline",
            "body": [
              {
                "type": "input-text",
                "name": "keywords",
                "addOn": {
                  "type": "submit",
                  "label": "搜索",
                  "level": "primary",
                  "icon": "fa fa-search pull-left"
                }
              }
            ]
          },
          "columns": [
            {
              "name": "engine",
              "label": "Rendering engine",
              "sortable": true,
              "searchable": true,
              "type": "text",
              "toggled": true
            },
            {
              "name": "browser",
              "label": "Browser",
              "sortable": true,
              "type": "text",
              "toggled": true
            },
            {
              "name": "platform",
              "label": "Platform(s)",
              "sortable": true,
              "type": "text",
              "toggled": true
            },
            {
              "name": "version",
              "label": "Engine version",
              "quickEdit": true,
              "type": "text",
              "toggled": true
            },
            {
              "name": "grade",
              "label": "CSS grade",
              "quickEdit": {
                "mode": "inline",
                "type": "select",
                "options": [
                  "A",
                  "B",
                  "C",
                  "D",
                  "X"
                ],
                "saveImmediately": true
              },
              "type": "text",
              "toggled": true
            },
            {
              "type": "operation",
              "label": "操作",
              "width": 100,
              "buttons": [
                {
                  "type": "button",
                  "icon": "fa fa-eye",
                  "actionType": "dialog",
                  "dialog": {
                    "title": "查看",
                    "body": {
                      "type": "form",
                      "body": [
                        {
                          "type": "static",
                          "name": "engine",
                          "label": "Engine"
                        },
                        {
                          "type": "divider"
                        },
                        {
                          "type": "static",
                          "name": "browser",
                          "label": "Browser"
                        },
                        {
                          "type": "divider"
                        },
                        {
                          "type": "static",
                          "name": "platform",
                          "label": "Platform(s)"
                        },
                        {
                          "type": "divider"
                        },
                        {
                          "type": "static",
                          "name": "version",
                          "label": "Engine version"
                        },
                        {
                          "type": "divider"
                        },
                        {
                          "type": "static",
                          "name": "grade",
                          "label": "CSS grade"
                        },
                        {
                          "type": "divider"
                        },
                        {
                          "type": "html",
                          "html": "<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
                        }
                      ]
                    }
                  }
                },
                {
                  "type": "button",
                  "icon": "fa fa-pencil",
                  "actionType": "dialog",
                  "dialog": {
                    "position": "left",
                    "size": "lg",
                    "title": "编辑",
                    "body": {
                      "type": "form",
                      "name": "sample-edit-form",
                      "api": "/amis/api/mock2/sample/$id",
                      "body": [
                        {
                          "type": "input-text",
                          "name": "engine",
                          "label": "Engine",
                          "required": true
                        },
                        {
                          "type": "divider"
                        },
                        {
                          "type": "input-text",
                          "name": "browser",
                          "label": "Browser",
                          "required": true
                        },
                        {
                          "type": "divider"
                        },
                        {
                          "type": "input-text",
                          "name": "platform",
                          "label": "Platform(s)",
                          "required": true
                        },
                        {
                          "type": "divider"
                        },
                        {
                          "type": "input-text",
                          "name": "version",
                          "label": "Engine version"
                        },
                        {
                          "type": "divider"
                        },
                        {
                          "type": "select",
                          "name": "grade",
                          "label": "CSS grade",
                          "options": [
                            "A",
                            "B",
                            "C",
                            "D",
                            "X"
                          ]
                        }
                      ]
                    }
                  }
                },
                {
                  "type": "button",
                  "icon": "fa fa-times text-danger",
                  "actionType": "ajax",
                  "confirmText": "您确认要删除?",
                  "api": "delete:/amis/api/mock2/sample/$id"
                }
              ],
              "toggled": true
            }
          ]
        }
      }
    ]
  }
}

效果

picker的属性表

crud

描述

CRUD，即增删改查组件，主要用来展现数据列表，并支持各类【增】【删】【改】【查】等操作

这个组件非常好用，一般的管理系统的表格数据的增删改查就用它，还可以设置filters来添加搜索条件

注意 CRUD 所需的数据必须放 items 中，因此如果只是想显示表格类型的数据没有分页，请使用 Table

示例代码

{
  "type": "page",
  "body": {
    "type": "crud",
    "syncLocation": false,
    "api": "/amis/api/mock2/sample",
    "headerToolbar": [
      "export-excel"
    ],
    "filter": {
        "title": "条件搜索",
        "columnCount": 2,
        "mode": "horizontal",
        "size": "md",
        "body": [
          {
            "type": "input-text",
            "label": "ID",
            "name": "id"
          }
        ]
    },
    "columns": [
      {
        "name": "id",
        "label": "ID"
      },
      {
        "name": "engine",
        "label": "Rendering engine"
      },
      {
        "name": "browser",
        "label": "Browser"
      },
      {
        "name": "platform",
        "label": "Platform(s)"
      },
      {
        "name": "version",
        "label": "Engine version"
      },
      {
        "name": "grade",
        "label": "CSS grade",
        "type": "mapping",
        "map": {
          "*": "<span class=\"label label-info\">${grade}</span>"
        }
      }
    ]
  }
}

效果

crud的属性表

table

描述

表格展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像Service这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过source属性，获取数据链中的数据，完成数据展示

示例代码

{
  "type": "page",
  "body": {
    "type": "service",
    "api": "/amis/api/mock2/sample?perPage=5",
    "body": [
      {
        "type": "table",
        "title": "表格1",
        "source": "$rows",
        "columns": [
          {
            "name": "engine",
            "label": "Engine"
          },
          {
            "name": "version",
            "label": "Version"
          }
        ]
      }
    ]
  }
}

效果

table的属性表

tableView

描述

通过表格的方式来展现数据，和 table 的不同之处：

• 数据源要求不同
  • table 的数据源需要是多行的数据，最典型的就是来自某个数据库的表
  • table view 的数据源可以来自各种固定的数据，比如单元格的某一列是来自某个变量
• 功能不同
  • table 只能用来做数据表的展现
  • table view 除了展现复杂的报表，还能用来进行布局
• 合并单元格方式不同
  • table 的合并单元格需要依赖数据
  • table view 的合并单元格是手动指定的，因此可以支持不规则的数据格式

示例代码

{
  "type": "page",
  "body": {
    "type": "service",
    "data": {
      "beijing": "20",
      "tianjing": "19"
    },
    "body": [
      {
        "type": "table-view",
        "trs": [
          {
            "background": "#F7F7F7",
            "tds": [
              {
                "body": {
                  "type": "tpl",
                  "tpl": "地区"
                }
              },
              {
                "body": {
                  "type": "tpl",
                  "tpl": "城市"
                }
              },
              {
                "body": {
                  "type": "tpl",
                  "tpl": "销量"
                }
              }
            ]
          },
          {
            "tds": [
              {
                "rowspan": 2,
                "body": {
                  "type": "tpl",
                  "tpl": "华北"
                }
              },
              {
                "body": {
                  "type": "tpl",
                  "tpl": "北京"
                }
              },
              {
                "body": {
                  "type": "tpl",
                  "tpl": "${beijing}"
                }
              }
            ]
          },
          {
            "tds": [
              {
                "body": {
                  "type": "tpl",
                  "tpl": "天津"
                }
              },
              {
                "body": {
                  "type": "tpl",
                  "tpl": "${tianjing}"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

效果

tableView的属性表

建议去官网查询，那里更详细，主要是懒嘿嘿

each

描述

循环渲染需要的组件，在vue就相当于v-for

示例代码

{
  "type": "page",
  "data": {
    "arr": [
      "A",
      "B",
      "C"
    ]
  },
  "body": {
    "type": "each",
    "name": "arr",
    "items": {
      "type": "tpl",
      "tpl": "<span class='label label-default m-l-sm'><%= data.item %></span> "
    }
  }
}

效果

each的属性表

mapping

描述

根据匹配条件，替换内容，挺实用的

示例代码

{
  "type": "page",
  "body": {
    "type": "mapping",
    "value": "2",
    "map": {
      "1": "<span class='label label-info'>漂亮</span>",
      "2": "<span class='label label-success'>开心</span>",
      "3": "<span class='label label-danger'>惊吓</span>",
      "4": "<span class='label label-warning'>紧张</span>",
      "*": "<span class='label label-default'>其他：${type}</span>"
    }
  }
}

效果

mapping的属性表

dialog

描述

Dialog 弹框 主要由 Action 触发，主要展示一个对话框以供用户操作

示例代码

{
  "type": "page",
  "body": {
    "label": "点击弹框",
    "type": "button",
    "actionType": "dialog",
    "dialog": {
      "title": "弹框标题",
      "body": "这是一个弹框"
    }
  }
}

效果

图一

图二

dialog的属性表

drawer

描述

抽屉型弹出框

示例代码

{
  "type": "page",
  "body": {
    "label": "弹出",
    "type": "button",
    "actionType": "drawer",
    "drawer": {
      "title": "抽屉标题",
      "body": "这是一个抽屉"
    }
  }
}

效果

图一

图二

drawer的属性表

toast

描述

轻提示

示例代码

{
  "type": "page",
  "body": [
    {
      "label": "提示",
      "type": "button",
      "actionType": "toast",
      "toast": {
        "items": [
          {
            "body": "轻提示内容"
          }
        ]
      }
    },
    {
      "label": "提示2",
      "type": "button",
      "actionType": "toast",
      "toast": {
        "items": [
          {
            "body": "轻提示内容2"
          }
        ]
      }
    }
  ]
}

效果

图一

图二

toast的属性表

注

以上的所以api以及数据都是需要自己定义的，请勿直接cv，有问题可留言，我解决不了我就问我领导哈哈

小结

  总的来说，基本用法都大差不差，都是先指定类型，然后再看看属性表里有没有能用到的属性，尝试着互相嵌套，搞清楚组件之间的逻辑关系，就可以入门啦！