amis组件学习的配置介绍(三)-烟雨网

highlight: agate
theme: qklhk-chocolate

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

书接上回。

action

ajax按钮

 "type": "button",
  "label": "ajax 请求",
  "actionType": "ajax",
  "api": "/amis/api/mock2/form/saveForm",
  "reload": "ComponentName" // 刷新目标组件，并且可以携带query参数到目标组件的数据域中。
  // 自定义请求的toast提示。
  "messages": {
      "success": "成功了！欧耶",
      "failed": "失败了呢。。"
    }

校验表单

在表单项未设置必填时，我们可以在提交表单的时候可以通过设置required属性来制定哪些组件需要验证。绑定的是组件的name属性。

下面的表单中会优先校验按钮required属性包含的表单项，当所有的字段校验完毕后，才会校验表单中固有的项目。需要额外注意的是，当按钮中的 required 和对应表单项本身的 required 属性冲突时，最终校验方式是"required": true。这个意思就是当指定的组件和button组件的required属性值不一致时，默认是true。

    {
      "type": "submit",
      "label": "提交-校验字段b",
      "actionType": "submit",
      "required": [
        "a"
      ],
      "level": "info"
    }

重置表单和清空

重置是表示让表单值回到初始化的值，清空是让表单的值等于“”。

  {
    "type": "reset",
    "label": "重置"
  },
  {
    "type": "button",
    "actionType": "clear",
    "label": "清空"
  },

自定义点击事件

一些组件我们可以设置onClick属性，来获取当前环境下的一些值，然后做一些自定义操作。

amis 会传入两个参数 event 和 props，event 就是 React 的事件，而 props 可以拿到这个组件的其他属性，同时还能调用 amis 中的内部方法。

    {
      "type": "page",
      "body": {
        "label": "点击",
        "type": "button",
        "onClick": "props.onAction(event, {actionType:'dialog', dialog: {title: '弹框', body: '这是代码调用的弹框'}})"
      }
    }

修改当前表单项的一些值。通过 props.formStore.setValues();

    "onClick": "props.formStore.setValues({name: 'amis', email: 'amis@baidu.com'});"
    
    // props.data可以获取当前数据域中的值

form

mode

    // mode: "inline", // label,content都显示在同一行，但是content会很小
    // mode: "horizontal", // label,content都显示在同一行，但是content很大，盛满父容器
    mode: "normal", // label,content不在同一行

horizontal

这个属性只有在mode: horizontal才会生效。

horizontal: {
  // 设置了左侧固定，那么在设置其他的内容就是无效的
  leftFixed: true,
  // 类似于justify-content: space-between
  "justify": true,
  "left": 2,
  "right": 6,
  "offset": 10
},

设置label宽度,设置label对齐方式

水平模式下 labelWidth 可以设置标签文本的自定义宽度，默认单位为px。

labelAlign可以设置标签文本的对齐方式，支持right和left。

该属性的优先级：表单项 > 表单。

    "labelWidth": 120,
    "labelAlign": "left",

实现一行展示多个表单项

columnCount控制表单显示几列

    "columnCount": 2,

或者通过group组件包裹表单项。

去掉表单边框

通过配置"wrapWithPanel": false，可以去掉默认表单边框（包括标题，按钮栏以及边距样式等）。

表单项数据初始化

表单可以通过配置initApi，实现表单初始化时请求接口，用于展示数据或初始化表单项。注意api属性是配置提交表单的api。

禁用数据链

官网的这个例子很具有说明力：

在 CRUD 的列表项中配置弹框，弹框中有一个表单，则该表单项中所有的同name表单项都会根据上层crud的行数据进行初始化，如果你是实现编辑的功能那并没有是什么问题，但是如果你是新建功能，那么这将不符合你的预期，你可以手动设置"canAccessSuperData": false来关闭该行为

将提交返回内容发送到其它组件

paginationWrapper 分页容器

    // 表示分页数据字段名
    "inputName": "rows",
    // 表示分页好的数据字段名
    "outputName": "rows1",
    // body属性可以配置容器来展示数据

hbox 布局

就是通过flex布局来设计的。

grid 布局

默认情况下元素都是等分宽度展示。

将屏幕分为12份。

可以通过xs, sm, md, lg设置响应屏幕下元素的占比份数。

经过测试有几个问题

      "type": "grid
      // 设置元素水平间距，这个间距区别不是很明显
      gap: "lg",
      // 设置元素排列位置。水平方向元素的排列效果
      align: "between",
      // 注意：这个属性好像没有用。
      valign: "middle", // 当元素垂直排列时。这个设置了好像没有效果
      "columns": [
        {
          // "lg": 1,
          // 设置内容（多个内容设置了flex-direction: column）垂直方向的对齐方式,下面有案例截图
          valign: "between",
          "body": [
            {
              "type": "wrapper",
              "body": "md: 3",
              "className": "bg-danger",
            },
            {
              "type": "wrapper",
              "body": "md: 3",
              "className": "bg-info",
            }
          ]
        },

flex 布局

其实我感觉这个布局可以替代hbox, grid布局组件的。

布局元素默认使用水平垂直居中的对齐。

移动端的支持
可以通过mobile属性来设置移动端时使用的属性。

 "mobile": {
   "direction": "column"
 },

page 组件

定义css变量或者css

局部修改css变量

  "cssVars": {
    "--text-color": "#108cee"
  },

自定义css属性，该css属性指定定义在当前页面中的元素上。

  "css": {
    ".myClass": {
      "color": "blue"
    }
  },

wrapper 包裹容器

其中有个style属性可以直接设置当前wrapper组件的样式。

    {
      "type": "page",
      "body": {
        "type": "page",
        "data": {
          "color": "#aaa"
        },
        "body": [
          {
            "type": "wrapper",
            "body": "内容",
            "className": "b",
            "style": {
              "color": "${color}",
              "fontSize": "30px"
            }
          }
        ]
      }
    }

source属性

映射当前数据域中的属性。让其成为当前组件中的数据域。$rows | ${rows}
通过指定api，请求数据。(这种方式并不是每个组件都支持的，比如images就不支持)

下面统计一下哪些source的可以通过配置api获取数据

nestedSelect
ListSelect
Options
nav

哪些属性可以编写html元素

label
map属性的映射
tpl
menuTpl

分组选择框

select
checkboxes

list-select并不支持分组展示列表选择。

联动

同一个数据域的组件可以相互访问组件中的变量。
不同层级的组件之间通信，可以通过target绑定目标组件的name属性，并且传递的参数通过query携带。注意这种联动只能发生在目标组件是可以创建数据域的。

跟踪页面交互行为

当我们在页面中不好去做一些提示等。我们就可以在全局区设置跟踪器来处理这些提示。

  let amis = amisRequire('amis/embed');
  let amisInstance = amis.embed(
   '#root',
   app,
   {
       // props
   },
   {
     // 追踪一些行为交互（props时当前触发该行为组件的配置schema）
     tracker: (eventTrack, props) => {
       console.log("eventTrack, props", eventTrack, props)
       if(eventTrack.eventType == "api") {
         amisLib.toast["info"]("发送请求")
       }else if(eventTrack.eventType == "submit") {
         amisLib.toast["error"]("我点击了提交")
       }
     }
   }
 );

扩展组件

这个需要知道amis库中的一些方法。

下面是官方给出的一个扩展表单验证的一个案例。

    let amisLib = amisRequire('amis');
    amisLib.addRule(
      // 校验名
      'isZXS',
      // 校验函数，values 是表单里所有表单项的值，可用于做联合校验；value 是当前表单项的值
      (values, value) => {
        if (
          value === '北京' ||
          value === '上海' ||
          value === '天津' ||
          value === '重庆'
        ) {
          return true;
        }
        return false;
      },
      // 出错时的报错信息
      '输入的不是直辖市'
    )

{
    "name": "id",
    "type": "input-text",
    "label": "id",
    validations: {
      isZXS: true
    },
    // 修改默认的提示信息
    validationErrors: {
      // isZXS: "请填写正确的值"
    },
    {
    "name": "name",
    "type": "input-text",
    "label": "name",
    validations: {
      isZXS: true
    },
    // 修改默认的提示信息
    validationErrors: {
      // isZXS: "请填写正确的值"
    }
}

文章版权归作者所有，未经允许请勿转载。

THE END