Fork me on GitHub

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

LowCode-项目记录

数组拖拽diff处理:

在数组中给每一项打上的key功效
Vue源码阅读尚不够深,基于已有知识初步判断
数组--> ··产生key映射到组件的哈希表·· --> 产生同一层级的虚拟DOM ---> 产生同一层级的真实dom
当数组更新后,新旧虚拟dom比较(首先比较key,然后比较key对应的元素)

vuedraggable事件触发

add\remove 只会触发发生相应改变的 drag对象
start\end 触发初始点击的 drag对象
start -> add -> remove -> end

draggable标签会映射成div标签

拖拽监听事件中的event参数中的to \ from \ item 为 draggable 映射的 div 标签

预览页面

组件绑定的变量只能由计算得到(例如el-input 的v-model需要直接绑定对应字段,但根据schema生成只能遍历计算得到字段,会被误认为是结果)

---- 将v-model拆分成 :value@input,且不能直接传计算表达式(仍然直接使用得到的值,而不是作为一个变量{供组件通信使用}),通过传入两个函数来获取

但上述解决方式会导致对监听事件的修改变得很困难,待解决
<div
   v-for="(item, index) in sublist.children"
   :key="index"
   class="row-item">
     <el-input v-if="item.type == 'input'" v-bind="{ ...item.options }" :value="getterDigData(item.options.vModel)" @input="setterDigData($event , item.options.vModel)"></el-input>
</div>
el-input输入每次输入后自动失去焦点

---- 原因如上代码中使用了v-for的key使用的不是index,导致数据更新后虚拟dom比较检测到不同,重刷页面

posted @ 2021-11-03 17:57  365/24/60  阅读(21)  评论(0编辑  收藏  举报