diff --git a/doc/docs/guide/community/JiangHH/AJ_Report大屏设计时多组件对齐和拖拽移动实现.md b/doc/docs/guide/community/JiangHH/AJ_Report大屏设计时多组件对齐和拖拽移动实现.md index 64cc145d..58da5eec 100644 --- a/doc/docs/guide/community/JiangHH/AJ_Report大屏设计时多组件对齐和拖拽移动实现.md +++ b/doc/docs/guide/community/JiangHH/AJ_Report大屏设计时多组件对齐和拖拽移动实现.md @@ -1,81 +1,69 @@ ## 多组件对齐和拖拽移动功能 -注意前端版本 vue版本 +注意前端版本、vue版本
-1.多组件选中实现 -2.对齐实现 -3.拖拽实现 +- 1、多组件选中实现
+- 2、对齐实现
+- 3、拖拽实现
### 1、多组件选中 -1. Ctrl键 -2. 鼠标框选 -3. 组合 + +- 1、Ctrl键
+- 2、鼠标框选
+- 3、组合
#### 方式1 Ctrl键实现多选 -说明: -1. 第一次单击组件,会默认把选中的组件加入到已选中的组件集合中. -2. 按住Ctrl键选中的组件,会加入到已选中的组件集合中. -3. 按住Ctrl键选中的组件,如果已选中的组件中包含该组件,则该组件取消选中. -4. 点击大屏其他位置(非组件),会把选中的组件清空. +- 1、第一次单击组件,会默认把选中的组件加入到已选中的组件集合中
+- 2、按住Ctrl键选中的组件,会加入到已选中的组件集合中
+- 3、按住Ctrl键选中的组件,如果已选中的组件中包含该组件,则该组件取消选中
+- 4、点击大屏其他位置(非组件),会把选中的组件清空
-测试截图: - -![](./picture/img_01.png) +![01](./picture/img_01.png) #### 方式2 鼠标框选实现多选 -说明: -1. 鼠标 (按下,移动,释放)生成矩形框,跟矩形框相交的组件会被选中. -2. 组合方式多选的情况下,框选之前已选中的组件不会加入(除非框选也有). -3. 框选的组件,也支持按住Ctrl键取消选中. -4. 点击大屏其他位置(非组件),会把选中的组件清空. +- 1、鼠标 (按下,移动,释放)生成矩形框,跟矩形框相交的组件会被选中
+- 2、组合方式多选的情况下,框选之前已选中的组件不会加入(除非框选也有)
+- 3、框选的组件,也支持按住Ctrl键取消选中
+- 4、点击大屏其他位置(非组件),会把选中的组件清空
-1. ​ 鼠标按下,移动,释放,会生成一个矩形框,跟矩形框相交的组件爱你,会被选中. -2. ​ 2.组合方式多选的情况下,框选之前已选中的组件不会加入(除非框选也有). -3. ​ 3.框选的组件,也支持按住Ctrl键取消选中. -4. ​ 4.点击大屏其他位置(非组件),会把选中的组件清空. +![02](./picture/img_02.png)
-- ​ 1.鼠标按下,移动,释放,会生成一个矩形框,跟矩形框相交的组件爱你,会被选中. +![03](./picture/img_03.png)
-测试截图: - -![](./picture/img_02.png) - -![](./picture/img_03.png) - -![](./picture/img_04.png) +![04](./picture/img_04.png)
### 2、多组件对齐 -单选右键菜单 +单选右键菜单
-![](./picture/img_05.png) +![05](./picture/img_05.png)
-多选右键菜单 +多选右键菜单
-![](./picture/img_06.png) +![06](./picture/img_06.png)
#### 左对齐/右对齐/居中对齐 -选择左对齐 (以最上边的组件为标准对齐)---不合适自己可以修改代码 +选择左对齐 (以最上边的组件为标准对齐)---不合适自己可以修改代码
-![](./picture/img_07.png) +![07](./picture/img_07.png)
#### 上对齐/下对齐/居中对齐 -选择上对齐(以最左边的组件为标准对齐)----不合适自己可以修改代码 +选择上对齐(以最左边的组件为标准对齐)----不合适自己可以修改代码
-![](./picture/img_08.png) +![08](./picture/img_08.png)
-![](./picture/img_09.png) +![09](./picture/img_09.png)
### 3、多组件移动拖拽 #### 多选状态 -![](./picture/img_10.png) +![10](./picture/img_10.png)
#### 拖拽后 -![](./picture/img_11.png) +![11](./picture/img_11.png)