x,y,w,h 同时设置更新,只会更新一个?

This issue has been tracked since 2022-02-10.

版本: "vue-drag-resize": "^1.5.4",

  <VueDragResize
      :isActive="true"
      :x="left"
      :y="top"
      :w="width"
      :h="height"
      :parentLimitation="true"
      v-on:resizing="resize"
      v-on:dragging="resize"
    >
      <h3>Hello World!</h3>
      <p>{{ top }} х {{ left }}</p>
      <p>{{ width }} х {{ height }}</p>
    </VueDragResize>

同时更新,发现只有left有效,其他三个无效

    test() {
      this.width += 10;
      this.height += 10;
      this.top += 10;
      this.left += 10;
    },
7d61f3a89092a5413d9defbbb7a33492.mp4

希望

10d2a5b43ab927267f66098456b5206f.mp4
adndyxu wrote this answer on 2022-03-25

需要通过ref修改组件的 left,right,top,bottom

webzhangle wrote this answer on 2022-04-25

这个问题解决了吗

jingyuLin1999 wrote this answer on 2022-04-27

还没,通过设置setTimeout延迟2ms,分开设置x,y,w,h,可以达到希望的效果。但是这种写法很low。

TseringYuu wrote this answer on 2022-05-04
newItem.x += 200;
this.$nextTick(() => {
  newItem.y += 200;
  this.$nextTick(() => {
    newItem.w += 200;
    this.$nextTick(() => {
      newItem.h += 200;
    });
  });
});
More Details About Repo
Owner Name kirillmurashov
Repo Name vue-drag-resize
Full Name kirillmurashov/vue-drag-resize
Language JavaScript
Created Date 2018-04-26
Updated Date 2022-11-25
Star Count 1764
Watcher Count 24
Fork Count 291
Issue Count 89

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date