Skip to content
Chameleon Docs

添加自定义组件物料

引擎内置只提供了基础的 HTML Tag 组件以及对应的物料, 如: div、p、video…等等，如果需要扩展使用自定义的物料，参考如下方式

编辑器配置

导入组件物料以及组件库的

import CustomCompMaterial from 'chamn-material-demo/dist/meta.js';


import {
  Engine,
  EnginContext,
  InnerComponentMeta,
  collectVariable,
  flatObject,
  LayoutPropsType,
  plugins,
} from '@chamn/engine';


const assetPackagesList = [
  {
    package: '@custom/xxxx',
    globalName: 'CustomComponent',
    resources: [
      // 这里使用 antd 做示例， 需要提供 antd 相关资源的 umd 地址，包括 js 和 css, 只是给编辑器模式下使用
      {
        src: 'https://cdn.jsdelivr.net/npm/antd@5.20.1/dist/antd.min.js',
      },
      {
        src: 'https://cdn.jsdelivr.net/npm/antd@5.20.1/dist/reset.min.css',
      },
      {
        src: 'https://cdn.jsdelivr.net/npm/dayjs@1.11.12/dayjs.min.js',
      },
    ],
  },
  {
    package: 'customComponent',
    globalName: 'ChameleonMaterialDemo',
    resources: [
      {
        src: './customComp/index.umd.js',
      },
    ],
  },
];


// ...


<Engine
  plugins={DEFAULT_PLUGIN_LIST}
  schema={page as any}
  material={[...InnerComponentMeta, ...CustomCompMaterial.meta]}
  component
  onReady={onReady}
/>;


//...

拷贝物料组件 UI 库

Terminal window
cp -rf ./node_modules/@chamn/render/dist/index.umd.js ./public/customComp/index.umd.js

渲染页面配置

渲染页面可以直接 import npm 包不用提供 umd 模式的 js 资源

import { useEffect, useState } from 'react';
import { ReactAdapter, Render, useRender } from '@chamn/render';
import * as antd from 'antd';
import CustomComps from '@custom/xxxx';


const components = {
  ...antd,
  ...CustomComps,
};
export const Preview = () => {
  const [page, setPage] = useState();
  const renderHandle = useRender();
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const localPage = localStorage.getItem('pageSchema');
    if (localPage) {
      setPage(JSON.parse(localPage));
      setLoading(false);
    }
  }, []);
  if (loading) {
    return <>Not find page info on local, please ensure you save it on editor</>;
  }
  return (
    <div className="App" style={{ overflow: 'auto', height: '100%' }}>
      <Render page={page} components={components} render={renderHandle} adapter={ReactAdapter} />
    </div>
  );
};

这样自定义的组件及可以被接入编辑器使用，可以被正确的渲染