如果我们需要定制原子布局
,只需要按照默认布局
的JSON规范,在业务模块中按需修改即可。系统会自动将两个JSON规范
合并。因此,定制布局的JSON规范
往往是增量部分,所以开发起来非常便捷
下面以业务模块test-note
为例,说明如何配置原子类型note
的content布局
atoms.{atomClass}.render.item
定制布局
的JSON配置
定义在atoms.{atomClass}.render.item
中,在这里就是:atoms.note.render.item
。为了让代码简洁,这些JSON配置都放入一个单独的文件中
src/module-vendor/test-note/front/src/config/config.js
- 1import configPartyRenderItem from './config/configPartyRenderItem.js';
- 2...
- 3export default {
- 4 ...
- 5 atoms: {
- 6 note: {
- 7 render: {
- 8 ...
- 9 item: configPartyRenderItem,
- 10 },
- 11 },
- 12 },
- 13};
src/module-vendor/test-note/front/src/config/config/configPartyRenderItem.js
- 1const __viewSizeDefaultLayoutView = [{ name: 'content' }, { name: 'default' }];
- 2const __viewSizeDefaultLayoutEdit = [{ name: 'default' }, { name: 'content' }];
- 3const __viewSizeDefaultView = {
- 4 small: __viewSizeDefaultLayoutView,
- 5 medium: __viewSizeDefaultLayoutView,
- 6 large: __viewSizeDefaultLayoutView,
- 7};
- 8const __viewSizeDefaultEdit = {
- 9 small: __viewSizeDefaultLayoutEdit,
- 10 medium: __viewSizeDefaultLayoutEdit,
- 11 large: __viewSizeDefaultLayoutEdit,
- 12};
- 13
- 14const item = {
- 15 info: {
- 16 layout: {
- 17 viewSize: {
- 18 view: __viewSizeDefaultView,
- 19 edit: __viewSizeDefaultEdit,
- 20 },
- 21 },
- 22 },
- 23 layouts: {
- 24 default: {
- 25 blocks: {
- 26 main: {
- 27 component: {
- 28 module: 'a-cms',
- 29 name: 'itemLayoutBlockMobileMain',
- 30 },
- 31 info: true,
- 32 },
- 33 },
- 34 },
- 35 content: {
- 36 blocks: {
- 37 main: {
- 38 component: {
- 39 module: 'a-cms',
- 40 name: 'itemLayoutBlockMobileMain',
- 41 },
- 42 markdown: true,
- 43 },
- 44 },
- 45 },
- 46 },
- 47};
- 48export default item;
关于JSON配置的具体说明,请参见:原子条目布局:默认布局
评论: