vue-drag-resize icon indicating copy to clipboard operation
vue-drag-resize copied to clipboard

动态添加数据时,删除前一个索引的数据时,后一个索引的对应的VueDragResize的y会变成前一个索引对应的VueDragResize的y。

Open MoHoYo opened this issue 2 years ago • 2 comments

在data中设置数据

copydata:[
        { vw: 320, vh: 24, top: 45, left: 216, color: '#000', fontSize: 24, content: '文案内容1', },
        { vw: 300, vh: 24, top: 259, left: 25, color: '#000', fontSize: 24, content: '文案内容2', },
        { vw: 300, vh: 24, top: 700, left: 500, color: '#000', fontSize: 24, content: '文案内容3', },
      ],

在VueDragResize中

<VueDragResize v-for="(item,index) in copydata" :key="index" :w="item.vw" :h="item.vh" :x='item.left'
        :y='item.top' :minh="20" :minw="220" :parentW="750" :parentH="750" :parentLimitation="true" :z="9"
        @resizestop="(newRect)=>copyResize(newRect, index)" @dragstop="(newRect)=>copyResize(newRect, index)">
        <p class="wrap"
          :style="{height:item.vh +'px',color:item.color,fontSize:item.fontSize+'px',lineHeight:item.fontSize +'px'}">
          {{ item.content}}</p>
      </VueDragResize>

在methods中 index对应的是copydata中元素相对应的索引

del (index) {
     this.copydata.splice(index, 1)
   }

点击del(1)时,文案内容3的top自动变成文案内容2的top,即文案内容3在文案内容2删除后自动移动到文案内容2的水平位置

MoHoYo avatar Apr 11 '22 08:04 MoHoYo

你好,请问你有解决这个问题吗?我也遇到了同样的问题

wangmuqi avatar Jun 14 '22 05:06 wangmuqi

循环渲染那里的key不要用index,用一个自定义的id,好像就可以解决这个问题了

marc111 avatar Jul 11 '22 08:07 marc111