文档更新

doc/docs/guide/community/JiangHH/AJ_Report大屏设计时多组件对齐和拖拽移动实现.md

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