antd-page-config

这是通过拖拽组件，配置元素来实现业务级的页面配置。

开始

安装

npm install antd-page-config --save

如何导入

import AntdPageConfig, { transformElements } from 'antd-page-config';
import 'antd-page-config/style/css';

如何使用

// 获取元素Map

let elements
function onSave(elementsMap) {
  elements = elementsMap;
}
<AntdPageConfig onSave={onSave} />

// 渲染

transformElements(elements).map(n => n.render())

// 编辑

<AntdPageConfig defaultElementMap={elements} onSave={onSave} />

如何使用自定义id设置属性

// 使用transformElements第二参数

const expandElementMap = {
  'custom_button': {
    attribute: {
      type: 'primary'
    },
    style: {
      color: 'red',
    },
    className: 'custom_button_class',
  }
}

transformElements(elements,expandElementMap).map(n => n.render())


// 在循环使用render渲染元素时，通过customId设置

transformElements(elements).map(n => {
  if(n.customId === 'custom_button') {
    n.setAttribute({
      type: 'primary'
    })
    n.setClassName('custom_button_class')
    n.setStyle({
      color: 'red'
    })
  }
  return n.render()
})

API

AntdPageConfig

| 参数 | 说明 | 类型 | 默认值 | | :-- | :-- | :-- | :--: | | style | 样式 | CSSProperties | - | | saveable | 保存按钮是否可见 | boolean | true | | saveText | 保存按钮文本 | string | '保存' | | closeable | 关闭按钮是否可见 | boolean | false | | closeText | 关闭按钮文本 | string | '关闭' | | defaultElementMap | 默认元素集 | elementMap: ElementMap | - | | antdTableColumnMode | 设置Table的Column的模式，可选 input select | string | 'input' | | antdTableColumnOptions | 当 antdTableColumnMode='select' ，可以设置列的下拉选项 | ColumnOptions[ ] | - | | onSave | 按钮保存的回调 | Function(elementMap: ElementMap) | - | | onClose | 按钮关闭的回调 | Function | - | | mode | 配置模式 standard | string | - |

ConfigurableElement

| 参数 | 说明 | 类型 | 默认值 | | :-- | :-- | :-- | :--: | | id | 可配置元素的id | string | - | | tagName | html标签和react组件标签 | string | - | | type | 元素的所属类型 | string | - | | customId | 自定义id | string | - | | element | 元素 | ReactNode | - | | children | element的子元素 | ReactChild | ElementMap | null | - | | style | 元素的样式 | CSSProperties | - | | className | 元素的css名 | string | - | | attribute | 元素的属性 | Attributes | - | | elementMapAttribute | 属性映射元素 | object | null | - | | dndIncludeAttr | 在拖拽时的属性 | object | - | | layout | 坐标布局，元素大小 | object | - | | containerClassName | 包裹元素容器的css名 | string | - | | dndType | 拖拽放置的类型 | string | 'all' | | extraValue | 额外的数据 | object | - | | behave | 元素的表现形式 block inline | string | - | | location | 最终决定渲染的坐标布局 | object | - | | packInsideComp | 包含内部组件，无需定位 | boolean | false | | renderHandle | 渲染时处理方法 | object | - | | parent | 元素属于哪个元素 | string | - | | hidden | 是否隐藏 | boolean | false | | setStyle | 设置元素样式 | Function(style: object) | - | | setClassName | 设置元素css名 | Function(className: string) | - | | setAttribute | 设置元素属性 | Function(attribute: object) | - | | render | 渲染元素 | Function | - |

ElementMap

| 参数 | 说明 | 类型 | 默认值 | | :-- | :-- | :-- | :--: | | id | 配置元素以id为key的集合 | object | - |

ColumnOptions

| 参数 | 说明 | 类型 | 默认值 | | :-- | :-- | :-- | :--: | | dataIndex|列数据在数据项中对应的 key | string | - | | title | 列头显示文字 | string | - |

常见问题

关于组件样式问题

使用 babel-plugin-import ， 没有引入 AntdPageConfig 使用的组件，那会造成样式不生效问题。

使用 import 'antd/dist/antd.css' ，打包程序会出现组件样式重复问题。

综上考虑， 引入 antd 组件方式是按手动按需加载。

那打包组件样式重复的问题怎么解决呢？

建议使用 webpack的分割代码功能，详细代码如下

optimization: {
  splitChunks: {
    cacheGroups: {
      antdUI: {
        name: 'chunk-antd',
        priority: 20,
        test: /[\\/]node_modules[\\/]antd[\\/]/,
      }
    }
  }
}

参与贡献

非常欢迎你的贡献，你可以通过以下方式和我们一起共建：

• 通过 Issue bug 或进行咨询。
• 提交 Pull Request 改进代码。