vue拖放组件dnd-grid,容器与box间数据传递和渲染的代码逻辑
作者:互联网
- 容器内所有box的位置信息数据集在页面中使用在两个地方,第一个地方以属性方式+同步修改修饰符.sync,传递给容器,容器用这个数据集生成一个layoutMap结构(键值结构)。第二个用于页面循环生成box组件
- 容器监听每个box发出的相关事件(拖动开始,拖动中,拖动停止)(事件由box组件发出),并动态维护layoutMap结构
- 容器的getPixelPostionByBoxId根据layoutMpa结构实时返回box的实时layout数据
- Box组件调用容器的getPixelPositionById,得到boxId对应的水平偏移量,用于渲染
- Box组件监听(拖动开始,拖动中,拖动停止),并将发出(emit)对应事件,由容器监听
- Box发出事件,容器进行监听,容器修改layoutMap结构,Box调用容器的方法得到最新的layout数据用于渲染。Box组件和容器的关联就是boxId
标签:box,dnd,容器,拖动,组件,Box,监听,拖放 来源: https://www.cnblogs.com/yanyan-yangyang/p/13938572.html