DevBoard

介绍

用于构建二次开发场景的组件配装面板。支持 React。

文档

安装使用

npm install react-lc-panel
or
yarn add react-lc-panel

Import Panel from 'react-lc-panel';

function App() {
	return <Panel />
}

API

| 属性 | 说明 | 类型 | 默认值 | | ---------------- | -------------------------- | ------------------------------------------- | ------- | | enableDrag | 是否响应拖入动作 | boolean | true | | enableLineHelper | 是否开启辅助线 | boolean | false | | screenWidth | 画布宽度 | number | 1920 | | screenHeight | 画布高度 | number | 1080 | | screenBGColor | 画布背景色 | string | #0d2a42 | | screenBG | 画布背景图 | string | — | | zoom | 缩放比例 | number | — | | makeCustomized | 缩略图 | TDragPos[] | — | | dragTarget | 拖拽目标的坐标 | TDragPos | — | | onDragEnd | 拖入动作完成后的回调 | （p: dropPos，t: boolean) => void | — | | onChasingLine | 拖入目标与辅助线贴近的回调 | (p: {left: number, top: number}) => void | — | | onChangeZoom | 画布缩放比例改变的回调 | (m: {zoom: number, unit: number}) => void | — |

案例

通过 npm start 本地运行并访问 http://localhost:8080/

Online example: https://alindas.github.io/devBoard/

问题

1. 放大后，面板水平方向的滚动通过按住 shift 滚动查看
2. 其他问题