Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
MoHoYo opened this issue Apr 11, 2022 · 2 comments

Comments

@MoHoYo
Copy link

MoHoYo commented Apr 11, 2022

在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的水平位置

@wangmuqi
Copy link

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

@marc111
Copy link

marc111 commented Jul 11, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants