@myBricks/spa-designer使用说明

点击 在线体验
[Github] @mybricks/spa-desinger

特性

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

安装及体验

git clone [email protected]: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={{
  //配置对象
}}/>

| 属性 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | :----: | | comlibLoader | 组件库loader | ()=>Promise<ComLib[]> |- | | comlibAdder | 添加组件库（配置此项则在设计器的组件库面板中显示添加按钮） | ()=>Promise<ComLib> | - | | pageLoader | 页面内容loader |()=>Promise<DumpObject> | undefined | | stage | 舞台配置 |{type:'pc'|'mobile', style?:{height:number, width:number, backgroundImage:string, backgroundColor:string}} |{type:'pc'} | | defaultCfgPanel | 默认（点击舞台空白位置触发）的配置项 |{title: string, items: {id: string, title: string, type: string, options?, value: {get: () => any, set: (v: any) => any}}[]} | - |

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

onLoad

使用方法

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

| 参数 | 说明 | 类型 | | ---- | ---- | ---- | | handlers | 设计器的可操作项数组 | {id:'toggleNavView'|'toggleCfgView'|'toggleDebug', title:string, exe:Function, disabled:boolean}[] | | dump | 导出当前设计内容 | ()=>DumpObject |

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

onMessage

使用方法

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

| 参数 | 说明 | 类型 | | ---- | ---- | ---- | | type | 消息的类型 | 'info'|'warn'|'error' | | msg | 消息内容 | string |

关于

微信 ALJZJZ
邮箱 [email protected]
权利所有：@MyBricks团队