Antd-page-config NPM

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[\\/]/,
      }
    }
  }
}