Skip to main content
Version: 2.x

构件的参数约定

showCard 参数约定​

表示是否需要包一层 Card，还是透明背景，默认为 true。比如

  • showCard=trueshowCard=true
  • showCard=falseshowCard=false

不要使用 title 字段​

因为 title 也是 html 原生属性，会真的变成“title”

构件尽量不要自带标题，即使 template 也不要带​

header 在编排的时候，有各种可能的放置方式

dataSource+fields​

注意：已废弃，请使用 transform。

点击展开。

原子构件（这里更多指的是原子展示构件，比如 brick-tag，cost-time 等）对于数据的输入是有要求的，这个数据可能是静态数据（在 storyboard 写死），但也有可能是动态，来源于 provider（点击查看如何 对接动态数据）。但 provider 代表是某一种数据接口，输出的数据格式是固定的。

这里就产生了一个矛盾，展示层有一套自己的参数定义，而接口层也有自己的固定接口格式，如果这两个不匹配，该如何解决。

在实践的过程中，我们总结了一套最佳实践方案 —— 通过 fields 来定义数据字段转换格式：

// brick-tag 标准
// 表示取 name 字段作为 key 的值，这里的值是 develop
// 表示取 text 字段作为 label 的值，这里的值是开发
{
  "brick": "presentational-bricks.brick-tag",
  "properties": {
    "componentType": "CheckableTag",
    "dataSource": [{"name": "develop", "text": "开发"}, {"name": "test", "text": "测试"}],
    "fields": {
      "key": "name",
      "label": "text"
    }
  }
}

// cost-time 的标准
{
  "brick": "presentational-bricks.cost-time",
  "properties": {
    "dataSource": {"ctime": "2019-10-21 10:10:10", "mtime": "2019-10-21 12:12:12"},
    "fields": {"startTime": "ctime", "endTime": "mtime"}
  }
}

这里举 cost-time 来说明：

构件本身提供了 cost、startTime、endTime 的输入（cost 优先，如果 cost 没有，则取 endTime-startTime 作为 cost），但也同时提供了 DataSource 和 fields 的搭配，在 fields 里面同样是能够自定义映射 cost、startTime、endTime

有一些原子构件的输入可能很简单，只是一个值，是否可以用 field 即可？

这里建议统一用 fields，因为：

  • 统一参数肯定会给未来构架编排降低难度
  • 虽然这个构件现在是只有一个输入参数，但未来是否可能是 2 个呢，fields 扩展性更强

configProps 参数约定​

注意：不推荐通过一个巨型参数对象透传够下层组件，构件应做好按需封装，不然后续构件进行重构的时候就无法进行了。

点击展开。

如果有属性透传给插件，统一用 configProps 名字，比如透传给 antd，透出给 echart。具体可查看如下例子：