vue3-drag-resize 拖拽拉伸循环并删除

原创于 2023-11-03 14:56:32 发布 · 651 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了如何在Vue应用中使用VueDragResize插件创建可调整大小的div，展示图例列表，并强调了避免在v-for循环中使用动态index作为key的重要性，以保持列表在删除项时的稳定渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

            <VueDragResize :isResizable="false" :w="478" :h="278" :x="-478" v-show="legendList.length"
                v-for="(item,index) in legendList" :key="item.name">
                <div class="legend-list">
                    <img src="@/assets/img/mapIcon(29).png" alt="" class="layer-close cur" @click="closeLegendList(index)">
                    <div class="v-flex1 v-scriollbar legend-list-contain">
                        <div class="v-flex2 v-m-r20" v-for="i in item.legends">
                            <div class="v-title-msg">{{ i.name }}</div>
                            <div class="legend-list-icon">
                                <div v-for="items in i.legendList" class="v-flex1 v-jc-fs v-ai-c">
                                    <img :src="items.img ? items.img : commonIcon" alt="">
                                    <div class="legend-list-title">{{ items.legendName }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </VueDragResize>

注意循环的时候不要用index作为唯一的key,这样会导致删除的时候index改变而导致页面重新渲染，使用不会变的key值，删除的时候则不会重新渲染循环页面。