vue-drag-resize
vue-drag-resize copied to clipboard
动态添加数据时,删除前一个索引的数据时,后一个索引的对应的VueDragResize的y会变成前一个索引对应的VueDragResize的y。
在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的水平位置
你好,请问你有解决这个问题吗?我也遇到了同样的问题
循环渲染那里的key不要用index,用一个自定义的id,好像就可以解决这个问题了