vue-draggable-resizable

Question

vue2 中 使用vue-draggable-resizable插件 ，其中被插件包裹的元素 点击事件失效 请问有啥解决办法

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

Vue draggable resizable 点击事件失效解决方案

Vue draggable resizable 插件可以使元素可拖拽和可调整大小，但是如果被插件包裹的元素点击事件失效，这可能是因为插件的事件处理机制导致的。

解决方案：

1. 使用 @click.stop 修饰符

在被插件包裹的元素上添加 @click.stop 修饰符，可以阻止事件冒泡，从而解决点击事件失效的问题。

<draggable-resizable :element="element">
  <div @click.stop="handleClick">点击事件</div>
</draggable-resizable>

1. 使用 event.stopPropagation() 方法

在被插件包裹的元素的点击事件处理函数中，使用 event.stopPropagation() 方法可以阻止事件冒泡。

<draggable-resizable :element="element">
  <div @click="handleClick(event)">点击事件</div>
</draggable-resizable>

methods: {
  handleClick(event) {
    event.stopPropagation();
    // 处理点击事件
  }
}

1. 使用 draggable-resizable 插件的 onDragStart 和 onDragEnd 事件

可以在 onDragStart 和 onDragEnd 事件中处理点击事件。

<draggable-resizable :element="element" @onDragStart="handleDragStart" @onDragEnd="handleDragEnd">
  <div>点击事件</div>
</draggable-resizable>

methods: {
  handleDragStart() {
    // 处理点击事件
  },
  handleDragEnd() {
    // 处理点击事件
  }
}

这些解决方案可以帮助你解决 Vue draggable resizable 插件点击事件失效的问题。