关于组件更新时的样式改变？

[xiaofanghao]

这是组件的开头

这是修改逻辑
//鼠标移动
const onMouseMove = (e: MouseEvent) => {
if (!moveStatus || !dragContainer.value || !dragStyle) return;
let boxWidth = parseFloat(dragStyle.width)
let boxHeight = parseFloat(dragStyle.height)
const newLeft = Math.min(window.innerWidth - boxWidthscreenStore.screenScale, Math.max(0, e.clientX - offsetX));
const newTop = Math.min(window.innerHeight - boxHeightscreenStore.screenScale, Math.max(0, e.clientY - offsetY));
dragContainer.value.style.left = ${(e.clientX-offsetX*screenStore.screenScale)}px;//相当于鼠标水平位置左移鼠标在弹窗的位置
dragContainer.value.style.top = ${(e.clientY-offsetY*screenStore.screenScale)}px;//跟上面类似
}
请问在组件更新时以哪个为准？
我想以拖拽后的结果为准如何修改？

[Wei-Ba]

直接修改DOM元素的话之后就不要让组件更新
为什么不用个响应式数据去更新数据呢
类似这样的

<script setup>
...
const currentStyle = reactive({})
const handleMousMove = (e) => {
  ...
  currentStyle.left = ...
  currentStyle.top = ...
}
</script>
<template>
  <div ... @mousemove="handleMousMove" class="absolute" :style="currentStyle"></div>
</template>

[xiaofanghao]

父组件在插槽里使用了v-for里的响应式数据更新导致触发了子组件的更新；使用动态样式后不知道为什么拖动不了了

//鼠标移动 const onMouseMove = (e: MouseEvent) => { if (!moveStatus || !dragContainer.value || !dragStyle) return; let boxWidth = parseFloat(dragStyle.width) let boxHeight = parseFloat(dragStyle.height) //Math.min(Math.max(a, 0), 100) const newLeft = Math.min(window.innerWidth - boxWidth*screenStore.screenScale, Math.max(0, e.clientX-offsetX*screenStore.screenScale)); const newTop = Math.min(window.innerHeight - boxHeight*screenStore.screenScale, Math.max(0, e.clientY-offsetY*screenStore.screenScale)); currentStyle.left = newLeft; currentStyle.top= newTop; }

[Wei-Ba]

提供的代码很多变量对我来说都是未知的，而且没有格式化，直接提供个Demo吧