掌握Amis组件与数据渲染：类名使用、组件联动及富文本编辑-CSDN博客

本文链接：https://blog.csdn.net/qq_40537083/article/details/119969966

一、amis类名使用技巧

amis本身会给各个dom节点添加类名，这个你可以通过浏览器审查功能查看，但一般不建议使用自有类名，因为amis其它各种组件都有可能有这个类名，这个时候你就可以通过自己额外添加自定义类名。额外添加类名具体方法就是通过配置className，如下图。

每个小的这种配置项组件几乎都可以通过这种方式加上类名，但要注意的是amis可能会在你额外加的类名上添加a-，这样上面的这个类名可能实际上是a-searchBoxA，同样具体详情你可以审查查看。

二、amis组件使用技巧

每个组件的类型都是通过type定义的，形如下图。熟悉之后定要掌握组件套组件。

1. tab选项卡组件

这个组件很常用，你可以选项名称以及内容自己写死，也可以通过拉取接口渲染数据。调取接口就尽可能在"type"："page"组件中通过"initApi":"接口名称"，从接口拉到的数据渲染到选项卡中就用"source":"从接口中取得自己所需变量"，然后就渲染成功了。下图的选项卡有些复杂，层层嵌套，一共三级选项卡，你可以模仿着来或者借助amis编辑器https://aisuda.github.io/amis-editor-demo/#/edit/0实现。除此之外，你还可以对选项卡组件配置一系列属性，具体可见amis文档tab选项相关内容。

页面效果如下图

2.卡片组件

需要注意的几个点我说明一下。 "api": "/api/family/category?perPage=12&page=${page}&type=${text}&status=2",这个接口拉取技巧。page=${page}中这个${page}取的变量是卡片组件分页的页码，如下图。${text}取的是我自己放在数据域中的变量。一旦这接口中这些变量变化就会重新拉取接口渲染页面。

要注意下defaultParams的使用，文档中有介绍。不要觉得我接口中perPage12和defaultParams中perPage12冲突，前者是为了划分从后台请求的数据，后者是amis中分页实现的前提。代码中的data.ThumbUrl是渲染卡片中的图片内容，ThumbUrl是拉取接口的的一个图片链接变量，数据格式如下图

3. amis数据渲染以及接口技巧

看文档知道有个数据域概念，不要担心，很简单，你自己可以通过data属性放东西在数据域中。拉取接口也会把拉取到的变量放在数据域中，你可以在这个数据域的下级取的到，取变量一般通过${变量名}。当然你也可以通过在react的render中放置数据变量，然后你依然可以在amis中取得到，要注意变量名不要冲突。如下图我成功放置了一个从componentDidMount中来的变量bb然后赋给text这个变量放置在了amis的全局数据域中。

请求接口有多种方式，"type":"page"中直接用initApi就行，其它form如表单可以这样用

，里面可以请求方式等配置各种参数，详情见amis文档。当然api还可以简写比如"api":"请求方式（get或者post）：接口名称"。api里面的data是传的参数。

上图的各种类型表单输入框，都可以通过name这个巨强大的属性来实现默认输入框值得映射以及表单项的提交，比如第二个专业下拉框就是提交一个字段为profession_id，值为你下拉框选择的内容，amis会自动通过这个name收集。值得主页的是这个专业下拉框也是通过拉取接口动态渲染的，你看下上面代码的结构很容易就学的会。

通过配置"actionType":"ajax"和api，可以实现 ajax 请求。

{
  "type": "page",
  "body": {
    "label": "ajax请求",
    "type": "button",
    "actionType": "ajax",
    "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm"
  }
}

4.组件联动刷新（可传递数据）

目标组件需要配置 name 属性
Action 上添加 "reload": "xxx"，xxx 为目标组件的 name 属性值，如果配置多个组件，name 用逗号分隔，另外如果想让 reload 的时候再携带些数据可以类似这样配置 {"reload": "xxx?a=${a}&b=${b}"}, 这样不仅让目标组件刷新，同时还会把当前环境中的数据 a 和 b 传递给 xxx.

具体项目中示例如下

额外小技巧："reload":"window"可刷新当前页面

5. 表单中上传文件或者图片

 {
                        "type": "input-file",
                        "label": "封面图片",
                        "name": "cover_pic",
                        "btnLabel": "选择文件",
                        "receiver":{
                          "url":"/assets/img",
                          "method":"post"
                        },
                        "accept": "*",
                        "mode": "inline",
                        "className": "m-md inputFileImage",
                        "btnUploadClassName": "btn-sm btn-success",
                        "btnClassName": "btn-sm btn-info"
                      },

要注意让后台接口配合