Craft-codeless-designer NPM

1.简介

Craft Codeless Designer 是一款可视化的低代码/零代码页面设计器，基于 craft.js 扩展而来。

2.用法

在你的 React 项目中安装依赖： yarn add craft-codeless-designer
引用 <CraftDesigner> 组件

render() {
    //只要给 CraftDesigner 传递 pageData 参数，它自己会反序列化成页面。
    const pageData = this.state.pageEntity.pageData;
    return (
        <CraftDesigner
            onSaveData={this.onSaveData.bind(this)}
            onLoadData={this.loadData.bind(this)}
            onPreview={this.onPreview.bind(this)}
            pageData={pageData}
            ></CraftDesigner>
    );
}

完整的实例项目参见： https://github.com/craft-codeless-designer/craft-codeless-designer-demo

3.核心 API

<CraftDesigner> 是唯一的核心组件，它集成了所有功能。

<CraftDesigner> 核心 props 说明：

props	说明
onPreview	预览按钮回调函数
onDelete	删除按钮回调函数
onUndo	Undo 按钮回调函数
onRedo	Redo 按钮回调函数
onSaveData	保存按钮回调函数
onLoadData	加载按钮回调函数
onHelp	Help 按钮回调函数
showNavBar	是否渲染顶部导航条，默认为 true
showSiderBar	是否渲染侧边工具栏，默认为 true
componentTypes	组件类型列表， CraftDesigner 内置的组件已经全部添加在列表中
iconList	组件图标列表， CraftDesigner 内置的图标已经全部添加在列表中
pageData	页面数据，传递和修改 pageData 会触发 CraftDesigner 重新渲染页面
enabled	是否启用编辑状态，默认为 true ，如果需要进入预览状态，请把此配置项设置为 false