vue-draggable-resizable可拖拽放大缩小，删除的解决方法

最新推荐文章于 2025-11-14 17:39:31 发布

原创最新推荐文章于 2025-11-14 17:39:31 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#大数据

本文介绍了如何使用Vue draggable-resizable插件实现图片列表的拖拽和删除操作，配合键盘事件，实现实时管理布局。

<vue-draggable-resizable
   v-for="(item,index) in pictureList"
   :parent="true"
   :w="item.width"
   :h="item.height"
   :key="index"
   :y="item.y"
   @activated="onActivated(index)">
    <el-image :src="item.src"></el-image>
</vue-draggable-resizable>

onActivated(index){
      let that = this
      document.onkeydown = function(event){
				if(event.code=="Delete"){
          that.pictureList.splice(index,1)
        }
	}
 },

绑定选中事件，然后监听键盘按下，然后删除index指定的框