react-lc-panel

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. 其他问题