@mybricks/spa-designer v1.0.4

@myBricks/spa-designer使用说明

点击 在线体验
Github(https://github.com/mybricks/spa-designer)

特性

• 源自实际业务的无代码解决方案，开源、免费
• 随手调试、所见即所得
• 图形化编程语言及扩展支持
• 强大且开放的自定义组件能力

安装及体验

git clone git@github.com:mybricks/spa-designer.git
cd ./designer
npm install
npm run dev

使用\<Designer\/>组件

npm install @mybricks/spa-designer --save

参考Github上的examples文件夹的代码， 主要文件列表如下:

examples     |App.less (样式)     |App.tsx (主应用)     |config.tsx (设计器配置)     |constants.ts     |index.html     |main.js     |__utils.ts

App.tsx：

import Designer from '@mybricks/spa-designer';
import {useComputed, useObservable} from '@mybricks/rxui';
import designerCfg from './config'

export default function App() {
  //定义响应式对象，用于保存设计器onload返回的内容
  const loaded = useObservable(class {
    handlers//按钮
    dump//保存时获取当前设计内容的函数
  })

  return (
    <div className={css.mainView}>
      <TitleBar loaded={loaded}/>
      {/*设计器*/}
      <Designer config={designerCfg}
                onLoad={({handlers, dump}) => {
                  //赋值到响应式对象
                  loaded.handlers = handlers
                  loaded.dump = dump
                }}
                onMessage={(type, msg) => {
                  //对设计过程中产生的消息进行处理
                  message.destroy()
                  message[type](msg)
                }}/>
    </div>
  )
}

config配置项

使用方法

<Designer config={{
  //配置对象
}}/>

ComLib类型参照《MyBricks组件开发规范》
DumpObject是设计器导出的对象格式

onLoad

使用方法

<Designer onLoad={({handlers, dump})=>{
  //处理内容
}}/>

DumpObject是设计器导出的对象格式

onMessage

使用方法

<Designer onMessage={({type, msg})=>{
  //处理内容
}}/>

关于

微信 ALJZJZ
邮箱 mybricks@126.com
权利所有：@MyBricks团队