使用 vue-draggable-resizable 组件时,更新组件的位置和大小数据后发现 transform 值不正确,导致组件位置出现异常。
解决方法:使用 key 属性
Vue 会根据每个节点的 key 值判断它们是否相同。当更新组件的数据时,如果组件的 key 值发生变化,Vue 将会重新创建一个新的组件实例。这种方式可以避免因为缓存的原因导致的组件位置错误问题。
<vue-draggable-resizable :w="100" :h="100"
:x.sync="x" :y.sync="y"
:key="`draggable-${id}`"> //保证每个组件的 key 值都不同
<!-- 组件内容 -->
</vue-draggable-resizable>