lee-react-drag v1.0.2

Installation

npm install lee-react-drag

Usage

import React, { useState } from "react";
import LeeReactDrag from "lee-react-drag";

// 组件属性类型
interface ComponentType {
  id: string; // 组件唯一id
  attr: string; // 组件配置信息，x-横坐标点，y-纵坐标点，w-宽度，h-高度，opacity-透明度 .....
  children: ComponentType[]; // 属性同父组件
  hideStatus: number; // 隐藏状态 1-隐藏 2-展示
  lockStatus: number; // 锁定状态 1-锁定 2-解锁
}

export default ()=> {
  // 组件集合
  const [components, setComponents] = useState<ComponentType[]>([{
        id: "123",
        children: [],
        attr: '{"x":50,"y":50,"w":200,"h":200,"opacity":100}',
        hideStatus: 2,
        lockStatus: 2
      }]);
  // 选中组件id集合
  const [selectedIds, setSelectedIds] = useState<(string | number)[]>([]);

  // 更新组件
  const handleUpdateCom = (data: ComponentType | ComponentType[]) => {
    if (data instanceof Array) {
      setComponents(data);
    } else {
      setSelectedIds([data.id]);
    }
  };

  // 选择组件
  const handleSelectCom = (ids: (string | number)[]) => {
    setSelectedIds(ids);
  };

  return (
    <>
      <LeeReactDrag
        components={components}
        selectedIds={selectedIds}
        onChange={handleUpdateCom}
        onSelect={handleSelectCom}
        isEdit
      />
    </>
  );
}

Lee React Drag Props

components: ComponentType[],
selectedIds: string[], // 选中的组件id集合
onChange: (data: ComponentType | ComponentType[]) => void, // 更新组件信息
onSelect: (ids: (string | number)[]) => void, // 选择组件
isEdit: boolean = true, // 是否编辑状态