您现在的位置是:首页 > 正文

架构-vue拖拽平台

2024-01-30 20:08:34阅读 0

1.文件解读
    src/data.json:拖拽组件内容区域配置文件(包含组件样式和需要渲染的组件)
        {
            "container": { //内容区域宽高
                "width": 550,
                "height": 550
            },
            "blocks": [   // 内容区域组件数组
            ]
        }
    packages/editor.jsx:拖拽组件布局组件
    packages/editor-block.jsx:内容区域每个组件配置
    utils/editor-config.jsx:需要渲染的组件配置
2.在packages/editor.jsx文件中实现拖拽组件布局
3.utils/editor-config.jsx:文件中配置需要渲染的组件,registerConfig.registe方法注册组件,componentMap属性为组件映射表
4.App.vue组件中将data.json数据传给editor.jsx,utils/editor-config.jsx数据变为全局数据
5.packages/editor.jsx文件的editor-left区域渲染可以拖拽组件的预览区域
6.packages/editor-block.jsx文件根据data.json文件中的blocks属性渲染对应的组件和组件位置
7.packages/useMenuDragger.js文件中拖拽松手时drop,把拖拽组件加到data.json的blocks中,在packages/editor-block.jsx文件onMounted事件让鼠标在元素中间(原本鼠标在元素左上角)
8.packages/editor.jsx文件的useFocus的blockMousedown事件,当选中拖拽组件内容区域的组件时,给组件添加focus属性,聚焦组件和不聚焦组件放在focusData里面,点击容器其它区域取消聚焦
9.packages/editor.jsx文件的useFocus的回调mousedown是获取要拖拽组件焦点后执行的事件,useBlockDragger.js文件中dragState记录拖拽前的组件位置信息,mousemove事件记录组件拖拽的位置
    更新组件的定位位置
10.useFocus.js文件中通过selectIndex属性记录最后获取焦点的组件索引用于做辅助线,packages/editor.jsx文件的containerMousedown方法点击内容区域时取消索引
11.useBlockDragger.js文件中记录所有非移动元素十根辅助线的位置和拖拽元素的位置(还有最外层内容区域元素)放在dragState.lines中,mousemove时计算横线和纵向的位置放在markLine中,
    packages/editor.jsx文件的内容区域将线渲染出来即可。同时重新计算moveX和moveY完成快吸功能(即将元素拖拽在十个相对比较常用的位置)
12.useMenuDragger.js文件中拖拽物料和结束拖拽(和useBlockDragger文件中拖拽组件和结束拖拽)使用mitt库触发对应的回调,useCommand.js文件的drag指令init中保存拖拽前和拖拽后内容区域组件
    前进指令就调用drag中的redo,后退指令就调用drag中的undo,keyboardEvent中让ctrl+y和ctrl+z执行前进和后退操作
13.packages/editor.jsx文件的$dialog实现导入导出data.json数据,在useCommand.js文件的updateContainer指令实现保存导入记录
14.在useCommand.js文件的placeTop和placeBottom和delete指令实现置顶和置地和删除功能
15.packages/editor.jsx文件实现编辑(可拖拽状态)和预览(不可拖拽状态)功能,预览时不能拖拽(useFocus的containerMousedown和blockMousedown第一行),编辑时去掉组件隐形蒙版,实现关闭功能(点击关闭只渲染内容区域即可)
16.在components/Dropdown.jsx中实现鼠标右键编辑单个组件,useCommand.js文件中updateBlock指令增加编辑单个组件前进后退功能
17.在components/editor-operator.jsx中实现组件属性操作栏,根据组件配置的属性,渲染组合一个点击的组件可操作的属性
18.packages/editor-block.jsx文件中拿到组件配置属性,editor-config.jsx文件中render方法根据组件属性渲染组件,editor-operator.jsx中apply和reset操作组件属性
19.实现输入框双向数据绑定,editor-block.jsx文件中render方法的model实现双向数据绑定
20.实现范围选择器双向数据绑定,utils/editor-config.jsx的range组件
21.实现下拉菜单物料(components/TableDialog.jsx和utils/editor-config.jsx的下拉框组件)
22.实现改变组件大小,editor-config.jsx文件中中可以修改组件大小的加上resize字段,editor-block.jsx文件中聚焦时和可以修改组件宽高时在BlockResize组件中渲染拖拽点
    block-resize.jsx文件根据拖拽的点去修改组件宽高和定位位置即可,在editor-config.jsx文件的render方法加上组件宽高样式即可
23.总结
    1)editor.jsx是整个拖拽组件,包含左边物料,上边操作按钮,右边属性配置,中间内容区
    2)左边物料的内容来自editor-config.jsx文件中preview,涉及的事件来自useMenuDragger.js
    3)中间内容区的内容来自editor-config.jsx文件中render(拖拽物料区时把组件信息放在data.json文件的blocks属性上,渲染时根据组件key值渲染对应组件即可),组件拖拽
      事件涉及文件useFocus.js和useBlockDragger.js
    4)上边操作按钮主要是前进和后退编辑操作,涉及的事件来自useCommand.js
    5)右边属性配置内容来自editor-config.jsx文件中props和model,编辑好的属性传到editor-block.jsx文件的render(即editor-config.jsx文件中render)然后渲染组件即可
    6)改变组件大小功能在editor-block.jsx文件的BlockResize

网站文章

  • react创建组件的两种方式

    1. 使用构造函数来创建组件如果需要传参,在函数中加一个props参数来接受,并且必须向外return一个合法的jsx创建的虚拟DOM。//1. 组件名首字母为大写 2. 必须return 合法的jsx// 这里就可以相当于子组件function Hellow (props){ //props为父组件传过来的数据 //如果打印props的话,只要子组件用的到东西都会打印出来,在这里...

    2024-01-30 20:08:05
  • Kubernetes K8S之SSL证书有效期修改

    如何修改Kubernetes的SSL证书有效期

    2024-01-30 20:07:59
  • Flask+Gunicorn项目打包

    一,项目打包思路梳理 1,本地环境先下载好离线包 <1>先创建本地虚拟环境 python3 -m venv 虚拟环境名 <2>安装项目所需第三方模块 pip install -r requiremen...

    2024-01-30 20:07:52
  • Java HotSpot(TM) 64-Bit Server VM warning:Options -Xverify:none and -noverify were deprecated in ..

    Java HotSpot(TM) 64-Bit Server VM warning:Options -Xverify:none and -noverify were deprecated in ..

    用IDEA学习springBoot. 运行程序时,出现了这种情况 Java HotSpot(TM) 64-Bit Server VM warning: Options -Xverify:none and -noverify were deprecated in JD 经过查找我找到了方法。

    2024-01-30 20:07:46
  • 会 C 语言就能做游戏? C 语言实现 flappy bird

    会 C 语言就能做游戏? C 语言实现 flappy bird

    C语言实现flappy bird(可视化编程) 前言 flappy bird是一款在2014年爆火的游戏,相信大家都曾听说过或者玩过,今天我们将会采用C语言来写这个游戏的基本玩法,最重要的是从中接触可...

    2024-01-30 20:07:18
  • golang的duck typing实现

    package mainimport ( "fmt")type ISayHello interface { SayHello()}type Person struct {}func (pe...

    2024-01-30 20:07:11
  • JDK和JRE的区别和联系

    JDK和JRE的区别和联系

    从图中可以看出JDK是整个JAVA的核心,包括了Java运行环境JRE(Java Runtime Envirnment)、一堆Java开发工具(javac/java/jdb等)和Java基础的类库(即...

    2024-01-30 20:07:03
  • JS中String()与new String()的区别

    JS中String()与new String()的区别

    今天看到这样的面试题,如下: var yiifaa = 'yiifaa', str1 = new String(yiifaa), str2 = String(yiifaa) 1 2 3 声明与赋值了3个变量,然后考题如下: // 请确认以下的判断是否准确 str1 === yiifaa // str2 === yiifaa // typeof s...

    2024-01-30 20:06:36
  • react中本地开发跨域如何处理

    【代码】react中本地开发跨域如何处理。

    2024-01-30 20:06:22
  • 李超线段树

    李超线段树

    什么是李超线段树 先以一个问题引入: 在平面上有两种操作(强制在线): 插入一条表达式为 L : y = k*x+b 的直线,给出 k ,b 。 给出 t,求当前所有直线中与直线 x = t 交点的纵...

    2024-01-30 20:05:53